前端 原型物件中this的認識

2022-08-17 22:48:11 字數 3632 閱讀 8987

今天我看了一篇博文,博文是關於原型物件介紹的。我把**貼上出來如下:

function supertype(){}  

supertype.prototype.name = 'sam';//在supertype.prototype指向的物件上增加了name屬性  

//在supertype.prototype指向的物件上增加了sayname方法  

supertype.prototype.sayname = function() ;  

supertype.prototype.setname = function(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 () ;

animal.prototype.setname = function (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 () ;

animal.prototype.setname = function (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 () ;

animal.prototype.setname = function (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的認識

今天我看了一篇博文,博文是關於原型物件介紹的。我把 貼上出來如下 function supertype supertype.prototype.name sam 在supertype.prototype指向的物件上增加了name屬性 在supertype.prototype指向的物件上增加了sayn...

前端開發JS 物件與原型

27 建立物件 工廠模式批量建立物件 缺點 無法物件識別,即所有物件都是object型別 方法記憶體空間浪費 封裝不太完善 function sayname function createobject name,age,gender return obj 或者直接返回物件 var o1 create...

javascript中的原型物件

function person person.prototype.name kobe person.prototype.age 23 person.prototype.job player person.prototype.sayname function var person1 new perso...