前端原型对象中this的认识

我就是我 2021-07-04 20:16 349阅读 0赞

今天我看了一篇博文，博文是关于原型对象介绍的。我把代码粘贴出来如下：

如果把第十行的代码改为：

this.name  = name;

在进行调用出现的结果就会不同：

var instance1 = new SuperType();
    
    var instance2 = new SuperType(); 
    
    instance1.sayName();//Sam 
    instance2.sayName();//Sam
    instance1.setName('Luce'); 
    instance1.sayName();//Luce

输出的结果不在是`Luce`

instance2.sayName();//Sam

**为什么？？把第十行改为了`this.name = name` 之后输出的结果不在是`Luce`而是`Sam`**

关键问题在于`this`指向的是哪里？？

原型中的`this`不是指的原型对象，而是调用对象。

怎样来理解这一句话？？？

下面来看一下一个简单的例子

1.  `console.log(animal.hasOwnProperty("name")); //true`

dog.setName('xiaoshu');

1.  `console.log(animal.hasOwnProperty("name")); //true`

dog.sayhello();    // xiaoshu
    cat.sayhello();     //张三

为什么不是我想的结果？？？我认为1.输出的是`false`，2.输出的是`true`。

**为什么，开始找问题在哪里？？？？？？？？？？**

1.  `console.log(animal.hasOwnProperty("name")); //true`这个是`true` ，照道理不应该是`false`吗？？  
    我自己把`animal`看了一下，自带一个`name`属性  
    ![在这里插入图片描述][20200312012229368.png]  
    难怪 `console.log(animal.hasOwnProperty("name")); //true` 为`true`。

修改：  
那我把`name`改为`name1`：

1.  `console.log(animal.hasOwnProperty("name1")); //false`

dog.setName('xiaoshu');

1.  `console.log(animal.hasOwnProperty("name1")); //false`

dog.sayhello();    // xiaoshu
    cat.sayhello();     //张三

为什么还不是自己想要的结果？？？？抓狂！！！ 继续改

1.  `console.log(dog.hasOwnProperty("name1")); //false`
2.  `console.log(cat.hasOwnProperty("name1")); //false`

dog.setName('xiaoshu');

1.  `console.log(dog.hasOwnProperty("name1")); //true`
2.  `console.log(cat.hasOwnProperty("name1")); //false`

dog.sayhello();    // xiaoshu
    cat.sayhello();     //张三

终于看到了自己想要的结果！！！！！  
**`dog`和`cat`是调用的对象  
在执行`dog.setName('xiaoshu');`这句之后，`setName`中的`this`指向的就是`dog`，`dog`这个调用对象中就多了一个`name1`这个属性。而这个`name1`属性不在`animal`函数中，只存在于`dog`这个实例对象中，归`dog`私自拥有，不是共享的。**

**这说明这个`this`是指向调用对象，而不是指向原型的。**

[20200312012229368.png]: /images/20210704/f46f4d789a0a4856aa8adf88b5d5807f.png