变量提升 & 原型解释

变量提升 & 原型解释


javascript 变量提升 原型链
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      //作用域分为 全局作用域 和 函数作用域
      //所有全局变量都挂在window上
      //变量提升 及 函数声明提升
      //1.使用var 创建的变量 会在所有代码执行前被声明
      console.log(a); //undefined
      var a = 123;

      //2.使用函数表达式创建的函数会在所有代码执行前被声明
      //使用 var 创建的跟变量没有区别 是undefined
      fun1(); //fun1 start
      function fun1() {
        console.log("fun1 start");
      }

      fun2(); //报错 fun2 is not a function
      var fun2 = function () {
        console.log("fun2 start");
      };
    </script>
  </head>
  <body></body>
</html>
我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象,就是所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。
原型对象也是对象,所以它也有原型,当我们使用一个对象的属性或方法时,会先在自身中寻找
1.如果有则直接使用 2.如果没有则回去原型对象中寻找,如果找到则直接使用
3.如果没有则去原型的原型中寻找,直到找到Object对象的原型
4.Object对象的原型是null,在Object中没找到则返回undefined
创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法
使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
e.g. console.log("name" in obj);
此时可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function Person() {
        // body...
      }

      Person.prototype.name = "niko";

      let person = new Person();

      console.log(person.__proto__.name); //niko

      let a = [];

      console.log(a.__proto__); //Array原型

      console.log(a.__proto__.__proto__); //Object原型
    </script>
  </head>
  <body></body>
</html>
© 2025 Niko Xie