原型和原型鏈 prototype和proto的區別詳情

會突然合同發表於2022-03-13

1、原型

原型是 function物件下的屬性,它定義了建構函式的共同祖先,也就是一個父子級的關係,子物件會繼承父物件的方法和屬性

  • prototype是函式下的屬性,物件想要檢視原型使用隱式屬性 __Proto__
  • constructor指向建構函式
  • 自己身上有屬性,原型上也有屬性,取近的,用自己的

通過給原型新增屬性,可以讓所有的例項化物件共享屬性和方法

Car.prototype = {
 height : 1400,
 lang : 4900,
 carName : 'BMW'
}
function Car() {
}
var car = new Car();

2、原型鏈

每個例項物件下都有 __proto__屬性,通過屬性 __proto__指向建構函式的原型物件,當到達末端時,返回null,這樣一層一層向頂端查詢,就形成了原型鏈

prototype是函式特有的,  __proto__是物件有的, js中萬物皆物件

prototype ——proto——區別與作用

  • prototype把共有屬性預先定義好,給之後物件使用
  • prototype的存在實現了繼承,節省記憶體空間
  • __proto__是物件的, prototype是函式的,因為函式也是物件,所以函式也有 __proto__ ;
  • __proto__的作用是就是當訪問一個物件的屬性時,如果該物件內部不存在這個屬性,那麼就會沿著它的 **__proto__**屬性所指向的那個物件(父物件)裡找,也就是原型鏈
  • prototype的作用是就是讓該函式所例項化的物件們都可以找到公用的屬性和方法

__proto__物件原型的意義就在於為物件的查詢機制提供一個方向,或者說一條路線,但是它是一個非標準屬性,因此實際開發中,不可以使用這個屬性,它只是內部指向原型物件 prototype

2.1 constructor建構函式

constructor屬性存在於 __proto__prototype,它指向建構函式本身

一般情況下,物件的方法都在建構函式的原型物件中設定。如果有多個物件的方法,我們可以給原型物件採取物件形式賦值,但是這樣就會覆蓋建構函式原型物件原來的內容,這樣修改後的原型物件 constructor 就不再指向當前建構函式了。此時,我們可以在修改後的原型物件中,新增一個 constructor 指向原來的建構函式。

問題 :修改了函式的原型物件,constructor的指向是誰

function Star(uname, age) {
     this.uname = uname;
     this.age = age;
 }
 // 很多情況下,我們需要手動的利用constructor 這個屬性指回 原來的建構函式
 Star.prototype = {
 // 如果我們修改了原來的原型物件,給原型物件賦值的是一個物件,則必須手動的利用constructor指回原來的建構函式
   constructor: Star, // 手動設定指回原來的建構函式
   sing: function() {
     console.log('我會唱歌');
   },
   movie: function() {
     console.log('我會演電影');
   }
}
var zxy = new Star('張學友', 19);
console.log(zxy)

在修改函式原型時,因為 Star.prototype就是一個物件,所以 constructor指向構造這個物件的原型,也就是 object

2.2 call/apply

通過 call``apply可以改變 this的指向,借用別人的函式完成自己的功能

區別: call傳多個引數  apply傳一個引數陣列

function Person(name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Student(name,age,sex,tel,grade) {
    //var this = {name: "lin", age: "19", sex: "male", tel: 123, grade: 78}
    Person.call(this,name,age,sex);//通過call改變this的指向這個函式
    //Person.apply(this,[name,age,sex])
    this.tel = tel;
    this.grade = grade;
}
var student = new Student('lin','19','male',123,78);

2.3 new()

  • 建立一個空物件
  • 建構函式的 this,繼承函式原型
  • this指向建構函式的物件例項,執行建構函式內容為新物件新增屬性和方法
  • 返回 this
var obj = {}//建立空物件
obj.__proto__ = Person.prototype;//繼承作用域
Person.call(obj,)//改變this指向
//這三步是隱式的
var person = new Person();//new操作

到此這篇關於原型和原型鏈 prototype和proto的區別詳情的文章就介紹到這了,更多相關原型和原型鏈 prototype和proto的區別內容請搜尋指令碼之家以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援指令碼之家!

您可能感興趣的文章:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70015111/viewspace-2869929/,如需轉載,請註明出處,否則將追究法律責任。

相關文章