前端 原型物件中this的認識

2021-10-03 16:46:51 字數 4761 閱讀 3909

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

function


supertype()


supertype.prototype.name =


'sam'


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


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


supertype.prototype.


sayname


=function()


;       supertype.prototype.


setname


=function


(name)


;var instance1 =


newsupertype()


;var instance2 =


newsupertype()


;            


instance1.


sayname()


;//sam  


instance2.


sayname()


;//sam  


instance1.


setname


('luce'


);  


instance1.


sayname()


;//luce  


instance2.


sayname()


;//luce
如果把第十行的**改為：

this


.name  = name;
在進行呼叫出現的結果就會不同：

var instance1 =


newsupertype()


;var instance2 =


newsupertype()


; 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 =


newanimal()


;var cat =


newanimal()


; dog.


sayhello()


;//張三


cat.


sayhello()


;//張三
console.log(animal.hasownproperty("name")); //true
dog.


setname


('xiaoshu'


);
console.log(animal.hasownproperty("name")); //true
dog.


sayhello()


;// xiaoshu


cat.


sayhello()


;//張三
為什麼不是我想的結果？？？我認為1.輸出的是false，2.輸出的是true。

為什麼，開始找問題在**？？？？？？？？？？

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 =


newanimal()


;var cat =


newanimal()


; dog.


sayhello()


;//張三


cat.


sayhello()


;//張三
console.log(animal.hasownproperty("name1")); //false
dog.


setname


('xiaoshu'


);
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 =


newanimal()


;var cat =


newanimal()


; dog.


sayhello()


;//張三


cat.


sayhello()


;//張三
console.log(dog.hasownproperty("name1")); //falseconsole.log(cat.hasownproperty("name1")); //false

dog.


setname


('xiaoshu'


);
console.log(dog.hasownproperty("name1")); //trueconsole.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...