this和原型对象(prototype)

文章目录

• ​​this​​
• ​​原型对象(prototype)​​

this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this，this指向的是一个对象。这个对象我们称为函数执行的 ​

​上下文对象​

​，根据函数的调用方式的不同，this会指向不同的对象：

• 以函数的形式调用时，this永远都是window
• 以方法的形式调用时，this就是调用方法的那个对象

this可以让我们的程序更加灵活，我们可以模拟一种场景，例如：定义一个方法，在对象调用它时，可以打印出自己的名字。

<script type="text/javascript">
      
      //创建一个name变量
      var name = "全局";
      
      //创建一个fun()函数
      function fun(){
        console.log(this.name);
      }
      
      //创建两个对象
      var obj = {
          name:"孙悟空",
          sayName:fun
      };
      
      var obj2 = {
          name:"沙和尚",
          sayName:fun
      };
      
      //我们希望调用obj.sayName()时可以输出obj的名字
      //obj.sayName();
      
      obj.sayName();
      
    </script>      

如果这个地方不使用this.name,就相当于把这个地方写死了，在不同的对象调用这个方法时，打印出来的名字不会动态地进行变化。

原型对象(prototype)

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象，这个对象就是我们所谓的原型对象。如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性。

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

注意：当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

对于以下代码，我们可以用一张图去理解它：

function MyClass(){
        
      }
      
      //向MyClass的原型中添加属性a
      MyClass.prototype.a = 123;
      
      //向MyClass的原型中添加一个方法
      MyClass.prototype.sayHello = function(){
        alert("hello");
      };
      
      var mc = new MyClass();
      
      var mc2 = new MyClass();
      
      //console.log(MyClass.prototype);
      //console.log(mc2.__proto__ == MyClass.prototype);
      
      //向mc中添加a属性
      mc.a = "我是mc中的a";
      
      //console.log(mc2.a);
      
      mc.sayHello();      

注意：使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。

所以衍生思考如果我们就只想知道对象本身有没有这个属性怎么办呢？

解决办法：可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性，使用该方法只有当对象自身中含有属性时，才会返回true。

进一步思考，我们发现创建对象的时候我们压根没有定义hasOwnProperty()这个方法，那为什么我们可以使用这个方法呢？

我们的第一反应肯定是：这个方法在它的原型对象中，但经过查询发现不是！

console.log(mc.hasOwnProperty("hasOwnProperty"));   //false
console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));  //false      

这里我们再引入一个概念：原型对象也是对象，所以它也有原型！

当我们使用一个对象的属性或方法时，会现在自身中寻找，自身中如果有，则直接使用，如果没有则去原型对象中寻找，如果原型对象中有，则使用，如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));  //false