成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

JS 原型及原型鏈學(xué)習(xí)

PiscesYE / 1449人閱讀

摘要:所以繼承了對(duì)象的所有方法,當(dāng)你用時(shí),會(huì)先查一下它的構(gòu)造函數(shù)的原型對(duì)象有沒(méi)有有方法,沒(méi)查到的話(huà)繼續(xù)查一下的原型對(duì)象有沒(méi)有這個(gè)方法。

普通函數(shù)與構(gòu)造函數(shù)的區(qū)別

在命名規(guī)則上,構(gòu)造函數(shù)一般是首字母大寫(xiě),普通函數(shù)遵照小駝峰式命名法。

在函數(shù)調(diào)用的時(shí)候: function fn() { }
構(gòu)造函數(shù):1. new fn( )

                 2 .構(gòu)造函數(shù)內(nèi)部會(huì)創(chuàng)建一個(gè)新的對(duì)象,即f的實(shí)例
                 3. 函數(shù)內(nèi)部的this指向 新創(chuàng)建的f的實(shí)例
                 4. 默認(rèn)的返回值是f的實(shí)例    

普通函數(shù):1. fn( )
                  2. 在調(diào)用函數(shù)的內(nèi)部不會(huì)創(chuàng)建新的對(duì)象
                  3. 函數(shù)內(nèi)部的this指向調(diào)用函數(shù)的對(duì)象,此函數(shù)的調(diào)用者(如果沒(méi)有對(duì)象調(diào)用,默認(rèn)是window)
                  4. 返回值由return語(yǔ)句決定

構(gòu)造函數(shù)的返回值:

   有一個(gè)默認(rèn)的返回值,新創(chuàng)建的對(duì)象(實(shí)例);
   當(dāng)手動(dòng)添加返回值后(return語(yǔ)句):
        1. 返回值是基本數(shù)據(jù)類(lèi)型-->真正的返回值還是那個(gè)新創(chuàng)建的對(duì)象(實(shí)例)
        2. 返回值是復(fù)雜數(shù)據(jù)類(lèi)型(對(duì)象)-->真正的返回值是這個(gè)對(duì)象

實(shí)例:

 function foo() {
    var f2 = new foo2();
    console.log(f2);  //{a: 3}
    console.log(this); //window
    return true;
  }
  function foo2() {
    console.log(this); //foo2類(lèi)型的對(duì)象 不是foo2函數(shù)
//    this.age = 30;
    return {a: 3};
  }
  var f1 = foo();
  console.log(f1); // true
一、普通對(duì)象與函數(shù)對(duì)象

JavaScript 中,萬(wàn)物皆對(duì)象!但對(duì)象也是有區(qū)別的。分為普通對(duì)象和函數(shù)對(duì)象,Object 、Function 是 JS 自帶的函數(shù)對(duì)象。下面舉例說(shuō)明

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();

function f1(){}; 
var f2 = function(){};
var f3 = new Function("str","console.log(str)");

console.log(typeof Object); //function 
console.log(typeof Function); //function  

console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   

console.log(typeof o1); //object 
console.log(typeof o2); //object 
console.log(typeof o3); //object

在上面的例子中 o1 o2 o3 為普通對(duì)象,f1 f2 f3 為函數(shù)對(duì)象。怎么區(qū)分,其實(shí)很簡(jiǎn)單,凡是通過(guò) new Function() 創(chuàng)建的對(duì)象都是函數(shù)對(duì)象,其他的都是普通對(duì)象。f1,f2,歸根結(jié)底都是通過(guò) new Function()的方式進(jìn)行創(chuàng)建的。Function Object 也都是通過(guò) New Function()創(chuàng)建的。
一定要分清楚普通對(duì)象和函數(shù)對(duì)象

二、構(gòu)造函數(shù)
function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person("Zaxlct", 28, "Software Engineer");
var person2 = new Person("Mick", 23, "Doctor");

上面的例子中 person1 和 person2 都是 Person 的實(shí)例。這兩個(gè)實(shí)例都有一個(gè) constructor (構(gòu)造函數(shù))屬性,該屬性(是一個(gè)指針)指向 Person。 即:

  console.log(person1.constructor == Person); //true
  console.log(person2.constructor == Person); //true

我們要記住兩個(gè)概念(構(gòu)造函數(shù),實(shí)例):

person1 和 person2 都是 構(gòu)造函數(shù) Person 的實(shí)例

實(shí)例的構(gòu)造函數(shù)屬性(constructor)指向構(gòu)造函數(shù)。 三、原型對(duì)象

在 JavaScript 中,每當(dāng)定義一個(gè)對(duì)象(函數(shù)也是對(duì)象)時(shí)候,對(duì)象中都會(huì)包含一些預(yù)定義的屬性。其中每個(gè)函數(shù)對(duì)象都有一個(gè)prototype 屬性,這個(gè)屬性指向函數(shù)的原型對(duì)象。(先用不管什么是 __proto__ 第二節(jié)的課程會(huì)詳細(xì)的剖析)

function Person() {}
Person.prototype.name = "Zaxlct";
Person.prototype.age  = 28;
Person.prototype.job  = "Software Engineer";
Person.prototype.sayName = function() {
  alert(this.name);
}
  
var person1 = new Person();
person1.sayName(); // "Zaxlct"

var person2 = new Person();
person2.sayName(); // "Zaxlct"

console.log(person1.sayName == person2.sayName); //true

每個(gè)對(duì)象都有 __proto__ 屬性,但只有函數(shù)對(duì)象才有 prototype 屬性

那什么是原型對(duì)象呢?

我們把上面的例子改一改你就會(huì)明白了:

Person.prototype = {
   name:  "Zaxlct",
   age: 28,
   job: "Software Engineer",
   sayName: function() {
     alert(this.name);
   }
}

原型對(duì)象,顧名思義,它就是一個(gè)普通對(duì)象(廢話(huà) = =!)。從現(xiàn)在開(kāi)始你要牢牢記住原型對(duì)象就是 Person.prototype ,如果你還是害怕它,那就把它想想成一個(gè)字母 A: var A = Person.prototype

在上面我們給 A 添加了 四個(gè)屬性:name、age、job、sayName。其實(shí)它還有一個(gè)默認(rèn)的屬性:constructor

在默認(rèn)情況下,所有的原型對(duì)象都會(huì)自動(dòng)獲得一個(gè) constructor(構(gòu)造函數(shù))屬性,這個(gè)屬性(是一個(gè)指針)指向 prototype 屬性所在的函數(shù)(Person)

上面這句話(huà)有點(diǎn)拗口,我們「翻譯」一下:A 有一個(gè)默認(rèn)的 constructor 屬性,這個(gè)屬性是一個(gè)指針,指向 Person。即:

Person.prototype.constructor == Person

在上面第二小節(jié)《構(gòu)造函數(shù)》里,我們知道實(shí)例的構(gòu)造函數(shù)屬性(constructor)指向構(gòu)造函數(shù) :person1.constructor == Person
這兩個(gè)「公式」好像有點(diǎn)聯(lián)系:

person1.constructor == Person
Person.prototype.constructor == Person

person1 為什么有 constructor 屬性?那是因?yàn)?person1 是 Person 的實(shí)例。
那 Person.prototype 為什么有 constructor 屬性??同理, Person.prototype (你把它想象成 A) 也是Person 的實(shí)例。
也就是在 Person 創(chuàng)建的時(shí)候,創(chuàng)建了一個(gè)它的實(shí)例對(duì)象并賦值給它的 prototype,基本過(guò)程如下:

var A = new Person();
 Person.prototype = A;
原型對(duì)象(Person.prototype)是 構(gòu)造函數(shù)(Person)的一個(gè)實(shí)例。 四. --proto--

JS 在創(chuàng)建對(duì)象(不論是普通對(duì)象還是函數(shù)對(duì)象)的時(shí)候,都有一個(gè)叫做__proto__ 的內(nèi)置屬性,用于指向創(chuàng)建它的構(gòu)造函數(shù)的原型對(duì)象。
對(duì)象 person1 有一個(gè) __proto__屬性,創(chuàng)建它的構(gòu)造函數(shù)是 Person,構(gòu)造函數(shù)的原型對(duì)象是 Person.prototype ,所以:
person1.__proto__ == Person.prototype

根據(jù)上面這個(gè)連接圖,我們能得到:

Person.prototype.constructor == Person;
person1.__proto__ == Person.prototype;
person1.constructor == Person;

不過(guò),要明確的真正重要的一點(diǎn)就是,這個(gè)連接存在于實(shí)例(person1)與構(gòu)造函數(shù)(Person)的原型對(duì)象(Person.prototype)之間,而不是存在于實(shí)例(person1)與構(gòu)造函數(shù)(Person)之間。
注意:因?yàn)榻^大部分瀏覽器都支持__proto__屬性,所以它才被加入了 ES6 里(ES5 部分瀏覽器也支持,但還不是標(biāo)準(zhǔn))。

五. 構(gòu)造器

熟悉 Javascript 的童鞋都知道,我們可以這樣創(chuàng)建一個(gè)對(duì)象:

var obj = {}

它等同于下面這樣:

var obj = new Object()

obj 是構(gòu)造函數(shù)(Object)的一個(gè)實(shí)例。所以:

obj.constructor === Object
obj.__proto__ === Object.prototype

新對(duì)象 obj 是使用 new 操作符后跟一個(gè)構(gòu)造函數(shù)來(lái)創(chuàng)建的。構(gòu)造函數(shù)(Object)本身就是一個(gè)函數(shù)(就是上面說(shuō)的函數(shù)對(duì)象),它和上面的構(gòu)造函數(shù) Person 差不多。只不過(guò)該函數(shù)是出于創(chuàng)建新對(duì)象的目的而定義的。所以不要被 Object 嚇倒。

同理,可以創(chuàng)建對(duì)象的構(gòu)造器不僅僅有 Object,也可以是 Array,Date,F(xiàn)unction等。
所以我們也可以構(gòu)造函數(shù)來(lái)創(chuàng)建 Array、 Date、Function

var b = new Array();
b.constructor === Array;
b.__proto__ === Array.prototype;

var c = new Date(); 
c.constructor === Date;
c.__proto__ === Date.prototype;

var d = new Function();
d.constructor === Function;
d.__proto__ === Function.prototype;

六. 原型鏈

小測(cè)試來(lái)檢驗(yàn)一下你理解的怎么樣:

person1.__proto__ 是什么?

Person.__proto__ 是什么?

Person.prototype.__proto__ 是什么?

Object.__proto__ 是什么?

Object.prototype__proto__ 是什么?

答案:
第一題:
因?yàn)?person1.__proto__ === person1 的構(gòu)造函數(shù).prototype
因?yàn)?person1的構(gòu)造函數(shù) === Person
所以 person1.__proto__ === Person.prototype
第二題:
因?yàn)?Person.__proto__ === Person的構(gòu)造函數(shù).prototype
因?yàn)?Person的構(gòu)造函數(shù) === Function
所以 Person.__proto__ === Function.prototype
第三題:
Person.prototype 是一個(gè)普通對(duì)象,我們無(wú)需關(guān)注它有哪些屬性,只要記住它是一個(gè)普通對(duì)象。
因?yàn)橐粋€(gè)普通對(duì)象的構(gòu)造函數(shù) === Object
所以 Person.prototype.__proto__ === Object.prototype
第四題,參照第二題,因?yàn)?Person 和 Object 一樣都是構(gòu)造函數(shù)
第五題:
Object.prototype 對(duì)象也有proto屬性,但它比較特殊,為 null 。因?yàn)?null 處于原型鏈的頂端,這個(gè)只能記住。

Object.prototype.__proto__ === null
七. 函數(shù)對(duì)象 (復(fù)習(xí)一下前面的知識(shí)點(diǎn)) 所有函數(shù)對(duì)象的proto都指向Function.prototype,它是一個(gè)空函數(shù)(Empty function)
Number.__proto__ === Function.prototype  // true
Number.constructor == Function //true

Boolean.__proto__ === Function.prototype // true
Boolean.constructor == Function //true

String.__proto__ === Function.prototype  // true
String.constructor == Function //true

// 所有的構(gòu)造器都來(lái)自于Function.prototype,甚至包括根構(gòu)造器Object及Function自身
Object.__proto__ === Function.prototype  // true
Object.constructor == Function // true

// 所有的構(gòu)造器都來(lái)自于Function.prototype,甚至包括根構(gòu)造器Object及Function自身
Function.__proto__ === Function.prototype // true
Function.constructor == Function //true

Array.__proto__ === Function.prototype   // true
Array.constructor == Function //true

RegExp.__proto__ === Function.prototype  // true
RegExp.constructor == Function //true

Error.__proto__ === Function.prototype   // true
Error.constructor == Function //true

Date.__proto__ === Function.prototype    // true
Date.constructor == Function //true

JavaScript中有內(nèi)置(build-in)構(gòu)造器/對(duì)象共計(jì)12個(gè)(ES5中新加了JSON),這里列舉了可訪(fǎng)問(wèn)的8個(gè)構(gòu)造器。剩下如Global不能直接訪(fǎng)問(wèn),Arguments僅在函數(shù)調(diào)用時(shí)由JS引擎創(chuàng)建,Math,JSON是以對(duì)象形式存在的,無(wú)需new。它們的proto是Object.prototype。如下

Math.__proto__ === Object.prototype  // true
Math.construrctor == Object // true

JSON.__proto__ === Object.prototype  // true
JSON.construrctor == Object //true

上面說(shuō)的函數(shù)對(duì)象當(dāng)然包括自定義的。如下

// 函數(shù)聲明
function Person() {}
// 函數(shù)表達(dá)式
var Perosn = function() {}
console.log(Person.__proto__ === Function.prototype) // true
console.log(Man.__proto__ === Function.prototype)    // true

這說(shuō)明什么呢?
所有的構(gòu)造器都來(lái)自于 Function.prototype,甚至包括根構(gòu)造器Object及Function自身。所有構(gòu)造器都繼承了·Function.prototype·的屬性及方法。如length、call、apply、bind
(你應(yīng)該明白第一句話(huà),第二句話(huà)我們下一節(jié)繼續(xù)說(shuō),先挖個(gè)坑:))
Function.prototype也是唯一一個(gè)typeof XXX.prototype為 function的prototype。其它的構(gòu)造器的prototype都是一個(gè)對(duì)象(原因第三節(jié)里已經(jīng)解釋過(guò)了)。如下(又復(fù)習(xí)了一遍):

console.log(typeof Function.prototype) // function
console.log(typeof Object.prototype)   // object
console.log(typeof Number.prototype)   // object
console.log(typeof Boolean.prototype)  // object
console.log(typeof String.prototype)   // object
console.log(typeof Array.prototype)    // object
console.log(typeof RegExp.prototype)   // object
console.log(typeof Error.prototype)    // object
console.log(typeof Date.prototype)     // object
console.log(typeof Object.prototype)   // object

噢,上面還提到它是一個(gè)空的函數(shù),console.log(Function.prototype) 下看看(留意,下一節(jié)會(huì)再說(shuō)一下這個(gè))
知道了所有構(gòu)造器(含內(nèi)置及自定義)的__proto__都是Function.prototype,那Function.prototype的__proto__是誰(shuí)呢?
相信都聽(tīng)說(shuō)過(guò)JavaScript中函數(shù)也是一等公民,那從哪能體現(xiàn)呢?如下

console.log(Function.prototype.__proto__ === Object.prototype) // true

這說(shuō)明所有的構(gòu)造器也都是一個(gè)普通 JS 對(duì)象,可以給構(gòu)造器添加/刪除屬性等。同時(shí)它也繼承了Object.prototype上的所有方法:toString、valueOf、hasOwnProperty等。(你也應(yīng)該明白第一句話(huà),第二句話(huà)我們下一節(jié)繼續(xù)說(shuō),不用挖坑了,還是剛才那個(gè)坑;))
最后Object.prototype的proto是誰(shuí)?

Object.prototype.__proto__ === null // true

已經(jīng)到頂了,為null。(讀到現(xiàn)在,再回過(guò)頭看第五章,能明白嗎?)

八. Prototype

在 ECMAScript 核心所定義的全部屬性中,最耐人尋味的就要數(shù) prototype 屬性了。對(duì)于 ECMAScript 中的引用類(lèi)型而言,prototype 是保存著它們所有實(shí)例方法的真正所在。換句話(huà)所說(shuō),諸如 toString()valuseOf() 等方法實(shí)際上都保存在 prototype 名下,只不過(guò)是通過(guò)各自對(duì)象的實(shí)例訪(fǎng)問(wèn)罷了。

——《JavaScript 高級(jí)程序設(shè)計(jì)》第三版 P116
我們知道 JS 內(nèi)置了一些方法供我們使用,比如:
對(duì)象可以用 constructor/toString()/valueOf() 等方法;
數(shù)組可以用 map()/filter()/reducer() 等方法;
數(shù)字可用用 parseInt()/parseFloat()等方法;

當(dāng)我們創(chuàng)建一個(gè)函數(shù)時(shí):

var Person = new Object()

PersonObject 的實(shí)例,所以 Person 繼承了Object 的原型對(duì)象Object.prototype上所有的方法:

Object 的每個(gè)實(shí)例都具有以上的屬性和方法。
所以我可以用 Person.constructor 也可以用 Person.hasOwnProperty。

當(dāng)我們創(chuàng)建一個(gè)數(shù)組時(shí):

var num = new Array()

numArray 的實(shí)例,所以 num 繼承了Array 的原型對(duì)象Array.prototype上所有的方法:

怎么是一個(gè)空數(shù)組???

我們可以用一個(gè) ES5 提供的新方法:Object.getOwnPropertyNames
獲取所有(包括不可枚舉的屬性)的屬性名不包括 prototy 中的屬性,返回一個(gè)數(shù)組:

var arrayAllKeys = Array.prototype; // [] 空數(shù)組
// 只得到 arrayAllKeys 這個(gè)對(duì)象里所有的屬性名(不會(huì)去找 arrayAllKeys.prototype 中的屬性)
console.log(Object.getOwnPropertyNames(arrayAllKeys)); 
/* 輸出:
["length", "constructor", "toString", "toLocaleString", "join", "pop", "push", 
"concat", "reverse", "shift", "unshift", "slice", "splice", "sort", "filter", "forEach", 
"some", "every", "map", "indexOf", "lastIndexOf", "reduce", "reduceRight", 
"entries", "keys", "copyWithin", "find", "findIndex", "fill"]
*/

這樣你就明白了隨便聲明一個(gè)數(shù)組,它為啥能用那么多方法了。
細(xì)心的你肯定發(fā)現(xiàn)了Object.getOwnPropertyNames(arrayAllKeys) 輸出的數(shù)組里并沒(méi)有 constructor/hasOwnPrototype等對(duì)象的方法(你肯定沒(méi)發(fā)現(xiàn))。
但是隨便定義的數(shù)組也能用這些方法

var num = [1];
console.log(num.hasOwnPrototype()) // false (輸出布爾值而不是報(bào)錯(cuò))

Why ???

因?yàn)?b>Array.prototype 雖然沒(méi)這些方法,但是它有原型對(duì)象(__proto__):

// 上面我們說(shuō)了 Object.prototype 就是一個(gè)普通對(duì)象。
Array.prototype.__proto__ == Object.prototype

所以 Array.prototype 繼承了對(duì)象的所有方法,當(dāng)你用num.hasOwnPrototype()時(shí),JS 會(huì)先查一下它的構(gòu)造函數(shù) (Array) 的原型對(duì)象 Array.prototype 有沒(méi)有有hasOwnPrototype()方法,沒(méi)查到的話(huà)繼續(xù)查一下 Array.prototype 的原型對(duì)象 Array.prototype.__proto__有沒(méi)有這個(gè)方法。

當(dāng)我們創(chuàng)建一個(gè)函數(shù)時(shí):

var f = new Function("x","return x*x;");
//當(dāng)然你也可以這么創(chuàng)建 f = function(x){ return x*x }
console.log(f.arguments) // arguments 方法從哪里來(lái)的?
console.log(f.call(window)) // call 方法從哪里來(lái)的?
console.log(Function.prototype) // function() {} (一個(gè)空的函數(shù))
console.log(Object.getOwnPropertyNames(Function.prototype)); 
/* 輸出
["length", "name", "arguments", "caller", "constructor", "bind", "toString", "call", "apply"]
*/

我們?cè)購(gòu)?fù)習(xí)第八小節(jié)這句話(huà):

所有函數(shù)對(duì)象proto都指向 Function.prototype,它是一個(gè)空函數(shù)(Empty function)

嗯,我們驗(yàn)證了它就是空函數(shù)。不過(guò)不要忽略前半句。我們枚舉出了它的所有的方法,所以所有的函數(shù)對(duì)象都能用,比如:

如果你還沒(méi)搞懂啥是函數(shù)對(duì)象?

還有,我建議你可以再?gòu)?fù)習(xí)下為什么:

Function.prototype 是唯一一個(gè)typeof XXX.prototype為 “function”的prototype

我猜你肯定忘了。

九. 復(fù)習(xí)一下

第八小節(jié)我們總結(jié)了:

所有函數(shù)對(duì)象的 __proto__ 都指向 Function.prototype,它是一個(gè)空函數(shù)(Empty function)

但是你可別忘了在第三小節(jié)我們總結(jié)的:

所有對(duì)象的 __proto__ 都指向其構(gòu)造器的 prototype

咦,我找了半天怎么沒(méi)找到這句話(huà)……

我們下面再?gòu)?fù)習(xí)下這句話(huà)。

先看看 JS 內(nèi)置構(gòu)造器:

var obj = {name: "jack"}
var arr = [1,2,3]
var reg = /hello/g
var date = new Date
var err = new Error("exception")
 
console.log(obj.__proto__ === Object.prototype) // true
console.log(arr.__proto__ === Array.prototype)  // true
console.log(reg.__proto__ === RegExp.prototype) // true
console.log(date.__proto__ === Date.prototype)  // true
console.log(err.__proto__ === Error.prototype)  // true

再看看自定義的構(gòu)造器,這里定義了一個(gè) Person:

function Person(name) {
  this.name = name;
}
var p = new Person("jack")
console.log(p.__proto__ === Person.prototype) // true

pPerson 的實(shí)例對(duì)象,p 的內(nèi)部原型總是指向其構(gòu)造器 Person 的原型對(duì)象 prototype。

每個(gè)對(duì)象都有一個(gè) constructor 屬性,可以獲取它的構(gòu)造器,因此以下打印結(jié)果也是恒等的:

function Person(name) {
    this.name = name
}
var p = new Person("jack")
console.log(p.__proto__ === p.constructor.prototype) // true

上面的Person沒(méi)有給其原型添加屬性或方法,這里給其原型添加一個(gè)getName方法:

function Person(name) {
    this.name = name
}
// 修改原型
Person.prototype.getName = function() {}
var p = new Person("jack")
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true

可以看到p.__proto__Person.prototype,p.constructor.prototype都是恒等的,即都指向同一個(gè)對(duì)象。
如果換一種方式設(shè)置原型,結(jié)果就有些不同了:

function Person(name) {
    this.name = name
}
// 重寫(xiě)原型
Person.prototype = {
    getName: function() {}
}
var p = new Person("jack")
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // false

這里直接重寫(xiě)了 Person.prototype(注意:上一個(gè)示例是修改原型)。輸出結(jié)果可以看出p.__proto__仍然指向的是Person.prototype,而不是p.constructor.prototype

這也很好理解,給Person.prototype賦值的是一個(gè)對(duì)象直接量{getName: function(){}},使用對(duì)象直接量方式定義的對(duì)象其構(gòu)造器(constructor)指向的是根構(gòu)造器Object,Object.prototype是一個(gè)空對(duì)象{},{}自然與{getName: function(){}}不等。如下:

var p = {}
console.log(Object.prototype) // 為一個(gè)空的對(duì)象{}
console.log(p.constructor === Object) // 對(duì)象直接量方式定義的對(duì)象其constructor為Object
console.log(p.constructor.prototype === Object.prototype) // 為true,不解釋(?ˇ3ˇ?)
十. 原型鏈(再?gòu)?fù)習(xí)一下:)

下面這個(gè)例子你應(yīng)該能明白了!

function Person(){}
var person1 = new Person();
console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__) //null

Person.__proto__ == Function.prototype; //true
console.log(Function.prototype)// function(){} (空函數(shù))

var num = new Array()
console.log(num.__proto__ == Array.prototype) // true
console.log( Array.prototype.__proto__ == Object.prototype) // true
console.log(Array.prototype) // [] (空數(shù)組)
console.log(Object.prototype.__proto__) //null

console.log(Array.__proto__ == Function.prototype)// true

疑點(diǎn)解惑:

 1. Object.__proto__ === Function.prototype // true
      Object 是函數(shù)對(duì)象,是通過(guò)new Function()創(chuàng)建的,所以O(shè)bject.__proto__指向Function.prototype。(參照第八小節(jié):「所有函數(shù)對(duì)象的__proto__都指向Function.prototype」)



 2. Function.__proto__ === Function.prototype // true
    Function 也是對(duì)象函數(shù),也是通過(guò)new Function()創(chuàng)建,所以Function.__proto__指向Function.prototype。

自己是由自己創(chuàng)建的,好像不符合邏輯,但仔細(xì)想想,現(xiàn)實(shí)世界也有些類(lèi)似,你是怎么來(lái)的,你媽生的,你媽怎么來(lái)的,你姥姥生的,……類(lèi)人猿進(jìn)化來(lái)的,那類(lèi)人猿從哪來(lái),一直追溯下去……,就是無(wú),(NULL生萬(wàn)物)
正如《道德經(jīng)》里所說(shuō)“無(wú),名天地之始”。

3.Function.prototype.__proto__ === Object.prototype //true

其實(shí)這一點(diǎn)我也有點(diǎn)困惑,不過(guò)也可以試著解釋一下。
Function.prototype是個(gè)函數(shù)對(duì)象,理論上他的__proto__應(yīng)該指向 Function.prototype,就是他自己,自己指向自己,沒(méi)有意義。
JS一直強(qiáng)調(diào)萬(wàn)物皆對(duì)象,函數(shù)對(duì)象也是對(duì)象,給他認(rèn)個(gè)祖宗,指向Object.prototype。Object.prototype.__proto__ === null,保證原型鏈能夠正常結(jié)束。

十一 總結(jié)

原型和原型鏈?zhǔn)荍S實(shí)現(xiàn)繼承的一種模型。
原型鏈的形成是真正是靠__proto__ 而非prototype

要深入理解這句話(huà),我們?cè)倥e個(gè)例子,看看前面你真的理解了嗎?

var animal = function(){};
 var dog = function(){};

 animal.price = 2000;
 dog.prototype = animal;
 var tidy = new dog();
 console.log(dog.price) //undefined
 console.log(tidy.price) // 2000

這里解釋一下:

var dog = function(){};
 dog.prototype.price = 2000;
 var tidy = new dog();
 console.log(tidy.price); // 2000
 console.log(dog.price); //undefined

 var dog = function(){};
 var tidy = new dog();
 tidy.price = 2000;
 console.log(dog.price); //undefined

這個(gè)明白吧?想一想我們上面說(shuō)過(guò)這句話(huà):

實(shí)例(tidy)和 原型對(duì)象(dog.prototype)存在一個(gè)連接。不過(guò),要明確的真正重要的一點(diǎn)就是,這個(gè)連接存在于實(shí)例(tidy)與構(gòu)造函數(shù)的原型對(duì)象(dog.prototype)之間,而不是存在于實(shí)例(tidy)與構(gòu)造函數(shù)(dog)之間。

本文轉(zhuǎn)載自 簡(jiǎn)書(shū) Yi罐可樂(lè)
https://www.jianshu.com/p/dee...
https://www.jianshu.com/p/652...
https://www.jianshu.com/p/a4e...

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/109912.html

相關(guān)文章

  • javaScript原型原型詳解(一)

    摘要:執(zhí)行行代碼,我們可以看到控制臺(tái)打印出來(lái)的結(jié)果如下結(jié)果印證了我們上面講的內(nèi)容指向的構(gòu)造函數(shù)指向的原型對(duì)象原型對(duì)象中指向構(gòu)造函數(shù)。 在javascript中原型和原型鏈機(jī)制是最難懂的部分(沒(méi)有之一),同時(shí)也是最重要的部分,在學(xué)習(xí)的過(guò)程中你可能認(rèn)認(rèn)真真的看了一遍但還是完全不懂書(shū)上說(shuō)的什么,的確是這樣的,我在學(xué)習(xí)的時(shí)候可是反復(fù)看了4、5遍才初步理解了。 下面我把我的理解總結(jié)了一下希望對(duì)你們有...

    springDevBird 評(píng)論0 收藏0
  • javaScript原型原型詳解(二)

    摘要:當(dāng)然這還沒(méi)完,因?yàn)槲覀冞€有重要的一步?jīng)]完成,沒(méi)錯(cuò)就是上面的第行代碼,如果沒(méi)有這行代碼實(shí)例中的指針是指向構(gòu)造函數(shù)的,這樣顯然是不對(duì)的,因?yàn)檎G闆r下應(yīng)該指向它的構(gòu)造函數(shù),因此我們需要手動(dòng)更改使重新指向?qū)ο蟆? 第一節(jié)內(nèi)容:javaScript原型及原型鏈詳解(二) 第一節(jié)中我們介紹了javascript中的原型和原型鏈,這一節(jié)我們來(lái)講利用原型和原型鏈我們可以做些什么。 普通對(duì)象的繼承 ...

    widuu 評(píng)論0 收藏0
  • 原型是什么?關(guān)于原型中constructor、prototype__proto__之間關(guān)系的認(rèn)

    摘要:的隱式原型是母,母是由構(gòu)造函數(shù)構(gòu)造的,但函數(shù)的隱式原型又是。。。??赡苁强紤]到它也是由構(gòu)造函數(shù)生成的吧,所以返回的值也是。 showImg(https://segmentfault.com/img/bVyLk0); 首先,我們暫且把object類(lèi)型和function類(lèi)型分開(kāi)來(lái),因?yàn)?function是一個(gè)特殊的對(duì)象類(lèi)型,我們這里這是便于區(qū)分,把function類(lèi)型單獨(dú)拿出來(lái)。順便一提,...

    kaka 評(píng)論0 收藏0
  • js面向?qū)ο?em>及原型繼承學(xué)習(xí)筆記。

    摘要:將構(gòu)造函數(shù)的作用域賦值給新的對(duì)象因此指向了這個(gè)新對(duì)象。以這種方式定義的構(gòu)造函數(shù)是定義在對(duì)象在瀏覽器是對(duì)象中的。構(gòu)造函數(shù)在不返回值的情況下,默認(rèn)會(huì)返回新對(duì)象實(shí)例。在創(chuàng)建子類(lèi)型的實(shí)例時(shí),不能向超類(lèi)型的構(gòu)造函數(shù)中傳遞參數(shù)。 創(chuàng)建對(duì)象 雖然Object構(gòu)造函數(shù)或?qū)ο笞置媪慷伎梢杂脕?lái)創(chuàng)建單個(gè)對(duì)象,但是這些方式有明顯的缺點(diǎn):使用同一個(gè)接口創(chuàng)建很多對(duì)象,會(huì)產(chǎn)生大量的重復(fù)代碼。為解決這個(gè)問(wèn)題,人們開(kāi)始...

    CrazyCodes 評(píng)論0 收藏0
  • JavaScript進(jìn)階學(xué)習(xí)(二)—— 基于原型繼承的js工具庫(kù)的實(shí)現(xiàn)方法

    摘要:一些額外的全局函數(shù)命名空間對(duì)象接口和構(gòu)造函數(shù)與沒(méi)有典型的關(guān)聯(lián),但卻是有效的。最后有幾點(diǎn)需要說(shuō)明的是每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象,原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針,而實(shí)例都包含一個(gè)指向原型對(duì)象的內(nèi)部指針。 文章來(lái)源:小青年原創(chuàng)發(fā)布時(shí)間:2016-07-03關(guān)鍵詞:JavaScript,原型鏈,jQuery類(lèi)庫(kù)轉(zhuǎn)載需標(biāo)注本文原始地址: http://zhaomenghuan.githu...

    陳偉 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

PiscesYE

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<