欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

圖文詳解JavaScript的原型對象及原型鏈

 更新時(shí)間:2016年08月02日 14:43:02   投稿:daisy  
許多人對JavaScript的原型及原型鏈仍感到困惑,網(wǎng)上的文章又大多長篇大論,令讀者不明覺厲。下面小編將用最簡潔明了的圖文介紹JavaScript的原型及原型鏈。

對于新人來說,JavaScript的原型是一個(gè)很讓人頭疼的事情,一來prototype容易與__proto__混淆,二來它們之間的各種指向?qū)嵲谟行?fù)雜,其實(shí)市面上已經(jīng)有非常多的文章在嘗試說清楚,有一張所謂很經(jīng)典的圖,上面畫了各種線條,一會連接這個(gè)一會連接那個(gè),說實(shí)話我自己看得就非常頭暈,更談不上完全理解了。所以我自己也想嘗試一下,看看能不能把原型中的重要知識點(diǎn)拆分出來,用最簡單的圖表形式說清楚。

我們知道原型是一個(gè)對象,其他對象可以通過它實(shí)現(xiàn)屬性繼承。但是尼瑪除了prototype,又有一個(gè)__proto__是用來干嘛的?長那么像,讓人怎么區(qū)分呢?它們都指向誰,那么混亂怎么記啊?原型鏈又是什么鬼?相信不少初學(xué)者甚至有一定經(jīng)驗(yàn)的老鳥都不一定能完全說清楚,下面用三張簡單的圖,配合一些示例代碼來理解一下。

一、prototype和__proto__的區(qū)別

var a = {};
console.log(a.prototype); //undefined
console.log(a.__proto__); //Object {}

var b = function(){}
console.log(b.prototype); //b {}
console.log(b.__proto__); //function() {}

/*1、字面量方式*/
var a = {};
console.log(a.__proto__); //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*2、構(gòu)造器方式*/
var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}

console.log(a.__proto__ === a.constructor.prototype); //false(此處即為圖1中的例外情況)

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}(即構(gòu)造器function A 的原型對象)
console.log(a.__proto__.__proto__); //Object {}(即構(gòu)造器function Object 的原型對象)
console.log(a.__proto__.__proto__.__proto__); //null

以上就是本文的全部內(nèi)容了,本文用三張圖解釋了JavaScript的原型對象與原型鏈,希望對大家學(xué)習(xí)JavaScript的時(shí)候有所幫助。

相關(guān)文章

  • JS中split()用法(將字符串按指定符號分割成數(shù)組)

    JS中split()用法(將字符串按指定符號分割成數(shù)組)

    這篇文章主要介紹了JS中split()用法(將字符串按指定符號分割成數(shù)組)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-10-10
  • webpack中使用Eslint的實(shí)現(xiàn)

    webpack中使用Eslint的實(shí)現(xiàn)

    本文主要介紹了webpack中使用Eslint的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • 自己使用js/jquery寫的一個(gè)定制對話框控件

    自己使用js/jquery寫的一個(gè)定制對話框控件

    自己做一個(gè)通用的控件,雖然不是絕對通用啦,但在我這個(gè)項(xiàng)目里還是可以隨意調(diào)用的,思想的話也可以借鑒到別的項(xiàng)目中
    2014-05-05
  • jsonp跨域請求詳解

    jsonp跨域請求詳解

    這篇文章主要為大家詳細(xì)介紹了jsonp跨域請求的相關(guān)資料,激活了所有接口支持瀏覽器跨域請求的封裝,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • javascript實(shí)現(xiàn)des解密加密全過程

    javascript實(shí)現(xiàn)des解密加密全過程

    這篇文章主要介紹了javascript 實(shí)現(xiàn)des解密加密的過程,需要的朋友可以參考下
    2014-04-04
  • javascript生成不重復(fù)的隨機(jī)數(shù)

    javascript生成不重復(fù)的隨機(jī)數(shù)

    這篇文章主要介紹了javascript在指定范圍內(nèi)生成不重復(fù)的隨機(jī)數(shù)的方法和相關(guān)實(shí)例,有需要的小伙伴可以參考下。
    2015-07-07
  • Bootstrap樹形菜單插件TreeView.js使用方法詳解

    Bootstrap樹形菜單插件TreeView.js使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Bootstrap樹形菜單插件TreeView.js使用方法,一款非常酷的基于bootstrap的jQuery多級列表樹插件,具有一定的實(shí)用性,感興趣的小伙伴們可以參考一下
    2016-11-11
  • JavaScript實(shí)現(xiàn)垂直向上無縫滾動特效代碼

    JavaScript實(shí)現(xiàn)垂直向上無縫滾動特效代碼

    下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)垂直向上無縫滾動特效代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-11-11
  • 什么是JavaScript中的結(jié)果值?

    什么是JavaScript中的結(jié)果值?

    你知道JavaScript中的結(jié)果值是什么嗎?這篇文章主要介紹了JavaScript結(jié)果值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • js編寫貪吃蛇的小游戲

    js編寫貪吃蛇的小游戲

    本文為大家介紹的是使用JS寫的貪吃蛇游戲,個(gè)人練習(xí)之用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望對大家學(xué)習(xí)js有所幫助
    2015-12-12

最新評論