三張圖搞懂JavaScript的原型對象與原型鏈

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

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

一、prototype和__proto__的區別

復制代碼
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、構造器方式*/
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 {}(即構造器function A 的原型對象)
console.log(a.__proto__.__proto__); //Object {}(即構造器function Object 的原型對象)
console.log(a.__proto__.__proto__.__proto__); //null

?https://www.cnblogs.com/shuiyi/p/5305435.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/539620.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/539620.shtml
英文地址,請注明出處:http://en.pswp.cn/news/539620.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

python partial_如何在python多處理模塊中使用partial函數?

下面是我如何解決這個問題的一個簡單例子from functools import partialfrom multiprocessing import Pooldef VariadicLifter(func, args):return func(*args)def func(x,y,z,a):return x2*y3*z4*aif __name__ __main__:func_ partial( func, 500, 1007)lfunc_ partial( Va…

Mybatis中resultMap

MyBatis中在查詢進行select映射的時候,返回類型可以用resultType,也可以用resultMap,resultType是直接 表示返回類型的,而resultMap則是對外部ResultMap的引用,但是resultType跟resultMap不能同時存在。 1.resultType …

超簡單的mysql多實例布置

一、基本概念mysql下載:http://mirrors.sohu.com/mysql/MySQL-5.5/1、MySQL多實例就是在一臺機器上面開啟多個不同的端口,運行多個MySQL服務進程。這些MySQL多實例公用一套安裝程序,使用不同的(也可以是相同的)配置文件,啟動程序&…

java程序設計計算器_Java程序設計計算器(含代碼)

Java程序課程設計任務書實用性計算器的設計與開發1、主要內容:開發一個實用型的計算器程序,實現基本的計算功能同時并進行相應的功能拓展,使其具更加人性化的功能。我們可以用其進行相應的計算功能來方便我們的學習,代替我們進行一…

mybatis配置insert/update/delete同一個模板

insert,update,delete標簽只是一個模板,在操作時是以sql語句為核心的, 即在做增/刪/改時,insert/update/delete便簽可以通用, 但做查詢時只能用 select 標簽 提倡什么操作就用什么標簽 這就是為什么 ex…

Mybatis配置文件resultMap映射啥時候可寫可不寫?

1、student實體類 public class Student {private Integer id;//編號private String name;//姓名private Double sal;//薪水public Student(){}public Student(Integer id, String name, Double sal) {this.id id;this.name name;this.sal sal;}public Integer getId() {ret…

arithmetic java_Java:Arithmetic

好吧,事實上你有方法設置變量叫get - 這顯然不是一個好主意,并且沒有縮進......但它應該有效。但是,你還沒有展示出你是如何使用它的。也許你實際上并沒有被稱為setter方法?以下是相同代碼但具有不同名稱的示例,以及使…

網絡框架 Retrofit(三)

簡單實現Retrofit(替代Okhttp) 1.定義注解參數 Documented Target(PARAMETER) Retention(RUNTIME) public interface Field {String value(); } 復制代碼Documented Target(METHOD) Retention(RUNTIME) public interface Get {String value() default &q…

Tomcat提示“XDB 的服務器 localhost 要求用戶名和密碼”

在地址欄輸入http://localhost:8080/(8080是TOMCAT的端口號)測試,系統提示“XDB 的服務器 localhost 要求用戶名和密碼”,并彈出輸入用戶、密碼的窗口,查看代碼沒問題,不解,上網上查資料,是因為…

java jqgrid json格式_jqGrid 數據之 Json

Json數據需要定義jsonReader來跟服務器端返回的數據做對應,其默認值: jsonReader : { root: "rows", page: "page", total: "total", records: "records", repeatitems: true, c…

django 中靜態文件項目加載問題

問題描述: django項目中創建了多個app后,每個app中都有對應的static靜態文件。整個項目運行時這些靜態文件的加載就是一個問題,因為整個項目我只參與了一部分,項目部署之類的并沒有參與。我寫的部分的js代碼遇到點問題&#xff0c…

Erlang/OTP設計原則(文檔翻譯)

http://erlang.org/doc/design_principles/des_princ.html 圖和代碼皆源自以上鏈接中Erlang官方文檔,翻譯時的版本為20.1。 這個設計原則,其實是說用戶在設計系統的時候應遵循的標準和規范。閱讀前我一直以為寫的是作者在設計 Erlang/OTP 框架時的一些原…

存儲過程的參數可以使用sql的函數

系統已做成存儲過程,調用方法如下: crh_entry(yyyymmdd,起始時間,結束時間); 示例1:進行2016年4月10日10時到12時的測試,應寫為: exec crh_entry(20160410,10,11); 示例2:進行2016年4月8日14時到15時的…

java如何實例化集合_如何在java中實例化一個Queue對象?

Queue是一個接口,這意味著你不能直接構造一個Queue 。最好的select是構造一個已經實現Queue接口的類,如下所示: AbstractQueue , ArrayBlockingQueue , ConcurrentLinkedQueue , DelayQueue , D…

leetcode 121 股票買賣問題系列

描述: 給一些列數字,表示每條股票的價格,如果可以買賣一次(不能同一天買和賣),求最大利益(即差最大)。 其他三道問題是,如果能買賣無限次,買賣兩次&#xff0…

Mybatis-jar-lib

csdn的下載好像和我有仇,上傳資源不斷提示:請您先登錄 下載:http://pan.baidu.com/s/1pL2BAzT asm-3.3.1.jar cglib-2.2.2.jar commons-logging-1.1.1.jar mybatis-3.1.1.jar ----以上mybatis的--- log4j-1.2.16.jar ----以上log4j日志--…

java使用隊列實現棧思路_算法面試:隊列實現棧的方案

聲明:碼字不易,轉載請注明出處,歡迎文章下方討論交流。前言:Java數據結構與算法專題會不定時更新,歡迎各位讀者監督。本篇介紹的是如何用兩個隊列實現棧的問題。這道題作為上一篇文章算法面試:棧實現隊列的…

Uber如何使用go語言創建高效的查詢服務

在2015年初我們創建了一個微服務,它只做一件事(也確實做得很好)就是地理圍欄查詢。一年后它成了Uber高頻查詢(QPS)服務,本次要講的故事就是我們為什么創建這個服務,以及編程語言新秀Go如何幫我們…

centos7:塔建pure_ftpd虛擬用戶

2019獨角獸企業重金招聘Python工程師標準>>> 1.下載pure_ftpd,上傳服務器,目錄路徑:/usr/local/src/ 下載地址:https://pan.baidu.com/s/1kWe8FAn 2.安裝pure_ftpd cd /usr/local/srctar -xjf pure-ftpd-1.0.36.tar.bz2cd pure-ftpd-1.0.36./configure -…

java.lang.module_如何修復“java.lang.module.FindException:module java.se.ee not found”錯誤

我正在嘗試打包我的kivy應用程序(python3),但是當我運行命令buildozer -v android debug時,看到這個錯誤# Cwd /home/javier/.buildozer/android/platform/android-sdkError occurred during initialization of boot layerjava.lang.module.FindExceptio…