原型和原型鏈 prototype和proto的區(qū)別詳情
1、原型
原型是function
對(duì)象下的屬性,它定義了構(gòu)造函數(shù)的共同祖先,也就是一個(gè)父子級(jí)的關(guān)系,子對(duì)象會(huì)繼承父對(duì)象的方法和屬性
prototype
是函數(shù)下的屬性,對(duì)象想要查看原型使用隱式屬性__Proto__
constructor
指向構(gòu)造函數(shù)- 自己身上有屬性,原型上也有屬性,取近的,用自己的
通過(guò)給原型添加屬性,可以讓所有的實(shí)例化對(duì)象共享屬性和方法
Car.prototype = { height : 1400, lang : 4900, carName : 'BMW' } function Car() { } var car = new Car();
2、原型鏈
每個(gè)實(shí)例對(duì)象下都有__proto__
屬性,通過(guò)屬性__proto__
指向構(gòu)造函數(shù)的原型對(duì)象,當(dāng)?shù)竭_(dá)末端時(shí),返回null,這樣一層一層向頂端查找,就形成了原型鏈
prototype
是函數(shù)特有的, __proto__
是對(duì)象有的,js
中萬(wàn)物皆對(duì)象
prototype
和——proto——
區(qū)別與作用
prototype
把共有屬性預(yù)先定義好,給之后對(duì)象使用prototype
的存在實(shí)現(xiàn)了繼承,節(jié)省內(nèi)存空間__proto__
是對(duì)象的,prototype
是函數(shù)的,因?yàn)楹瘮?shù)也是對(duì)象,所以函數(shù)也有__proto__
;__proto__
的作用是就是當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性時(shí),如果該對(duì)象內(nèi)部不存在這個(gè)屬性,那么就會(huì)沿著它的**__proto__**
屬性所指向的那個(gè)對(duì)象(父對(duì)象)里找,也就是原型鏈prototype
的作用是就是讓該函數(shù)所實(shí)例化的對(duì)象們都可以找到公用的屬性和方法
__proto__對(duì)象原型的意義就在于為對(duì)象的查找機(jī)制提供一個(gè)方向,或者說(shuō)一條路線,但是它是一個(gè)非標(biāo)準(zhǔn)屬性,因此實(shí)際開發(fā)中,不可以使用這個(gè)屬性,它只是內(nèi)部指向原型對(duì)象 prototype
2.1 constructor構(gòu)造函數(shù)
constructor
屬性存在于__proto__
和prototype
,它指向構(gòu)造函數(shù)本身
一般情況下,對(duì)象的方法都在構(gòu)造函數(shù)的原型對(duì)象中設(shè)置。如果有多個(gè)對(duì)象的方法,我們可以給原型對(duì)象采取對(duì)象形式賦值,但是這樣就會(huì)覆蓋構(gòu)造函數(shù)原型對(duì)象原來(lái)的內(nèi)容,這樣修改后的原型對(duì)象 constructor 就不再指向當(dāng)前構(gòu)造函數(shù)了。此時(shí),我們可以在修改后的原型對(duì)象中,添加一個(gè) constructor 指向原來(lái)的構(gòu)造函數(shù)。
問(wèn)題 :修改了函數(shù)的原型對(duì)象,constructor的指向是誰(shuí)
function Star(uname, age) { this.uname = uname; this.age = age; } // 很多情況下,我們需要手動(dòng)的利用constructor 這個(gè)屬性指回 原來(lái)的構(gòu)造函數(shù) Star.prototype = { // 如果我們修改了原來(lái)的原型對(duì)象,給原型對(duì)象賦值的是一個(gè)對(duì)象,則必須手動(dòng)的利用constructor指回原來(lái)的構(gòu)造函數(shù) constructor: Star, // 手動(dòng)設(shè)置指回原來(lái)的構(gòu)造函數(shù) sing: function() { console.log('我會(huì)唱歌'); }, movie: function() { console.log('我會(huì)演電影'); } } var zxy = new Star('張學(xué)友', 19); console.log(zxy)
在修改函數(shù)原型時(shí),因?yàn)?code>Star.prototype就是一個(gè)對(duì)象,所以constructor
指向構(gòu)造這個(gè)對(duì)象的原型,也就是object
2.2 call/apply
通過(guò)call``apply
可以改變this
的指向,借用別人的函數(shù)完成自己的功能
區(qū)別:call
傳多個(gè)參數(shù) apply
傳一個(gè)參數(shù)數(shù)組
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);//通過(guò)call改變this的指向這個(gè)函數(shù) //Person.apply(this,[name,age,sex]) this.tel = tel; this.grade = grade; } var student = new Student('lin','19','male',123,78);
2.3 new()
- 創(chuàng)建一個(gè)空對(duì)象
- 構(gòu)造函數(shù)的
this
,繼承函數(shù)原型 - 讓
this
指向構(gòu)造函數(shù)的對(duì)象實(shí)例,執(zhí)行構(gòu)造函數(shù)內(nèi)容為新對(duì)象添加屬性和方法 - 返回
this
var obj = {}//創(chuàng)建空對(duì)象 obj.__proto__ = Person.prototype;//繼承作用域 Person.call(obj,)//改變this指向 //這三步是隱式的 var person = new Person();//new操作
到此這篇關(guān)于原型和原型鏈 prototype和proto的區(qū)別詳情的文章就介紹到這了,更多相關(guān)原型和原型鏈 prototype和proto的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例的相關(guān)資料,這里提供image觸摸并監(jiān)聽的簡(jiǎn)單實(shí)例,需要的朋友可以參考下2017-08-08直觀詳細(xì)的typescript隱式類型轉(zhuǎn)換圖文詳解
這篇文章主要為大家介紹了直觀詳細(xì)的typescript隱式類型轉(zhuǎn)換圖文詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07可視化埋點(diǎn)元素圈選器實(shí)現(xiàn)源碼
這篇文章主要為大家介紹了可視化埋點(diǎn)元素圈選器實(shí)現(xiàn)源碼示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解
這篇文章主要為大家介紹了Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序 獲取當(dāng)前地理位置和經(jīng)緯度實(shí)例代碼
這篇文章主要介紹了微信小程序 獲取當(dāng)前地理位置和經(jīng)緯度實(shí)例代碼的相關(guān)資料,這里附有實(shí)例代碼,及實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-12-12Skypack布局前端基建實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Skypack布局前端基建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07PHP:微信小程序 微信支付服務(wù)端集成實(shí)例詳解及源碼下載
這篇文章主要介紹了微信小程序 微信支付服務(wù)端集成實(shí)例詳解及源碼下載的相關(guān)資料,需要的朋友可以參考下2017-01-01微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03