原型和原型鏈 prototype和proto的區別詳情
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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 詳解原型鏈中的prototype和 __proto__原型
- JS原型鏈、prototype、__proto__、原型鏈繼承詳解JS原型繼承
- 用自己的方式(圖)理解constructor、prototype、__proto__和原型鏈Struct原型
- JS 系列二:深入 constructor、prototype、__proto__、[[Prototype]] 及 原型鏈JSStruct原型
- js 原型鏈繼承__proto__、prototype簡析JS原型繼承
- 一張圖徹底KO原型鏈(prototype,__proto__)原型
- 原型和原型鏈原型
- 原型和原型鏈梳理原型
- 理解原型和原型鏈原型
- JS原型和原型鏈JS原型
- 原型和原型鏈的深入探索原型
- 前端開發:JS中原型和原型鏈的詳解前端JS原型
- 圖解原型和原型鏈圖解原型
- ? 圖解原型和原型鏈圖解原型
- 如何理解JavaScript的原型和原型鏈?JavaScript原型
- 徹底深刻理解js原型鏈之prototype,__proto__以及constructor(二)JS原型Struct
- 徹底深刻理解js原型鏈之prototype,__proto__以及constructor(一)JS原型Struct
- 【前端面試】原型和原型鏈前端面試原型
- 深入理解原型和原型鏈原型
- 原型和原型鏈的抽筋拔骨原型
- Object.prototype.__proto__, [[prototype]] 和 prototypeObject
- 徹底搞懂JavaScript原型和原型鏈JavaScript原型
- 重新認識原型和原型鏈一原型
- 重新認識原型和原型鏈二原型
- 重新認識原型和原型鏈三原型
- 深入理解原型物件和原型鏈原型物件
- 說說JS中的原型物件和原型鏈JS原型物件
- prototype 與 __proto__區別
- __proto__和prototype
- JavaScript:原型(prototype)JavaScript原型
- JavaScript prototype 原型JavaScript原型
- 原型鏈、_ptoto_、prototype、constructor的學習原型Struct
- 2024-05-10 js原型和原型鏈JS原型
- 徹底搞懂原型、原型鏈和繼承原型繼承
- JS 中原型和原型鏈深入理解JS原型
- 全面瞭解 Javascript Prototype Chain 原型鏈JavaScriptAI原型
- 徹底搞清楚 JavaScript 的原型和原型鏈JavaScript原型
- 從我的校長生涯談原型和原型鏈原型