原型和原型鏈

heartFollower 發(fā)布于2019-08-21 16:43 / 3185人閱讀

摘要：創(chuàng)建對象有幾種方法字面量構(gòu)造函數(shù)原型構(gòu)造函數(shù)實(shí)例原型鏈的關(guān)系幾點(diǎn)說明函數(shù)聲明時自動增加屬性，初始化一個空對象構(gòu)造函數(shù)才會有，普通函數(shù)會有實(shí)例對象才會有繼承工作原理通過原型鏈的方式找到原型對象，原型對象的方法和屬性會共享實(shí)例沒有的屬性會向上查

創(chuàng)建對象有幾種方法

// 1.字面量
var o1 = {
    name: "o1"
};
var o2 = new Object({
    name: "o2"
});
// 2.Object.create()
var o3 = Object.create({
    name: "o3"
});
// 3.構(gòu)造函數(shù)
var M = function () {
    this.name = "o3"
};
var o4 = new M();

原型、構(gòu)造函數(shù)、實(shí)例、原型鏈的關(guān)系

幾點(diǎn)說明：

函數(shù)聲明時自動增加prototype屬性，初始化一個空對象

構(gòu)造函數(shù)才會有prototype，普通函數(shù)會有__proto__

實(shí)例對象才會有__proto__

繼承

工作原理：通過原型鏈的方式找到原型對象，原型對象的方法和屬性會共享；實(shí)例沒有的屬性會向上查找

instanceof的原理

判斷原理：實(shí)例對象的__proto__屬性和構(gòu)造函數(shù)的prototype屬性是不是引用同一個地址，而且實(shí)例對象的constructor必須指向?qū)?yīng)構(gòu)造函數(shù)

var a = [1, 2, 3];
alert(a instanceof Array);  //返回true
alert(a instanceof Object);  //返回true
 
alert(a.constructor == Array);  //返回true
alert(a.constructor == Object);  //返回false

constructor 更加精確地指向?qū)ο笏鶎俚念悾鴮?instanceof 而言，即使是父類也會返回true

練習(xí)：如何判斷一個對象是否屬于某個類

if(a instanceof Person){
    alert("yes");
}

new運(yùn)算符（過程、工作原理）

1.創(chuàng)建一個空對象，并且this變量指向改對象，同時還繼承了該構(gòu)造函數(shù)的原型
2.屬性和方法被加入到this引用的對象中去
3.最后隱式的返回this對象
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

云服務(wù)器 GPU云服務(wù)器原型原型鏈原型鏈原型鏈繼承原型鏈圖

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88635.html

相關(guān)文章

《javascript高級程序設(shè)計(jì)》筆記：原型圖解

摘要：不理解沒關(guān)系，下面會結(jié)合圖例分析上一篇高級程序設(shè)計(jì)筆記創(chuàng)建對象下一篇高級程序設(shè)計(jì)筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈文章直接從原型圖解開始的，如果對一些概念不太清除，可以結(jié)合后面幾節(jié)查看 1. 圖解原型鏈 1.1 鐵三角關(guān)系（重點(diǎn)） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個繼承層級，而實(shí)線表示屬性引用。原型鏈?zhǔn)菍?shí)現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學(xué)經(jīng)常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點(diǎn)JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個繼承層級，而實(shí)線表示屬性引用。原型鏈?zhǔn)菍?shí)現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學(xué)經(jīng)常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點(diǎn)JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0
JavaScript面向?qū)ο?--原型鏈繼承

摘要：因?yàn)檫@造成了繼承鏈的紊亂，因?yàn)榈膶?shí)例是由構(gòu)造函數(shù)創(chuàng)建的，現(xiàn)在其屬性卻指向了為了避免這一現(xiàn)象，就必須在替換對象之后，為新的對象加上屬性，使其指向原來的構(gòu)造函數(shù)。這個函數(shù)接收兩個參數(shù)子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù)。最近一直在研究js面向?qū)ο螅玩溊^承是一個難點(diǎn)，下面是我對繼承的理解以下文章借鑒自CSDN季詩筱的博客原型鏈繼承的基本概念： ES中描述了原型鏈的概念，并將原型鏈作為實(shí)現(xiàn)...

vspiders 2019-08-20 13:33 評論0 收藏0
JavaScript中的原型與原型鏈

摘要：前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。那么你是否清楚完整的了解它呢？國際慣例，讓我們先拋出問題：什么是原型、原型鏈它們有什么特點(diǎn) 它們能做什么怎么確定它們的關(guān)系或許你已經(jīng)有答案，或許你開始有點(diǎn)疑惑，無論是 get 新技能或是簡單的溫習(xí)一次，讓我們一起去探究一番吧如果文章中有出現(xiàn)紕...

laoLiueizo 2019-08-23 16:58 評論0 收藏0
JS基礎(chǔ)-原型、原型鏈真的不能一知半解

摘要：原型鏈和對象的原型是對象實(shí)例和它的構(gòu)造函數(shù)之間建立的鏈接，它的值是構(gòu)造函數(shù)的。對象的原型根據(jù)上文提到的構(gòu)造調(diào)用函數(shù)的時候會創(chuàng)建一個新對象，自動將的原型指向構(gòu)造函數(shù)的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內(nèi)容，不少初學(xué)者甚至有一定經(jīng)驗(yàn)的老鳥都不一定能完全說清...

changfeng1050 2019-08-26 11:00 評論0 收藏0