前端原型对象中this的认识

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

function SuperType(){}
SuperType.prototype.name = 'Sam';//在SuperType.prototype指向的对象上增加了name属性
//在SuperType.prototype指向的对象上增加了sayName方法
SuperType.prototype.sayName = function() {
document.write(this.name);
};
SuperType.prototype.setName = function(name) {
SuperType.prototype.name = name;
};
var instance1 = new SuperType();
var instance2 = new SuperType();
instance1.sayName();//Sam
instance2.sayName();//Sam
instance1.setName('Luce');
instance1.sayName();//Luce
instance2.sayName();//Luce

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

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不是指的原型对象，而是调用对象。

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

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

function animal() {
 }
 animal.prototype.name = '张三';
 animal.prototype.sayhello = function () {
   console.log(this.name);
 };

 animal.prototype.setName = function (name) {
   this.name = name;
 };

 var dog = new animal();
 var cat = new animal();
 dog.sayhello();   //张三

cat.sayhello();   //张三

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

 dog.setName('xiaoshu');

2. 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属性

难怪 console.log(animal.hasOwnProperty("name"));  //true  为true。


修改：
那我把name改为name1：

function animal() {
 }
 animal.prototype.name1 = '张三';
 animal.prototype.sayhello = function () {
   console.log(this.name1);
 };

 animal.prototype.setName = function (name) {
   this.name1 = name;
 };

 var dog = new animal();
 var cat = new animal();
 dog.sayhello();   //张三

cat.sayhello();   //张三

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

 dog.setName('xiaoshu');

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

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

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

function animal() {
 }
 animal.prototype.name1 = '张三';
 animal.prototype.sayhello = function () {
   console.log(this.name1);
 };

 animal.prototype.setName = function (name) {
   this.name1 = name;
 };

 var dog = new animal();
 var cat = new animal();
 dog.sayhello();   //张三

cat.sayhello();   //张三

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

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

 dog.setName('xiaoshu');

3. console.log(dog.hasOwnProperty("name1"));  //true

4. 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是指向调用对象，而不是指向原型的。

前端 原型对象中this的认识

前端原型对象中this的认识