prototype

anyway 發布于2019-08-20 18:56 / 3354人閱讀

摘要：構造函數構造函數就是普通函數，為了和其他函數區別，第一個字母大寫。左側是實例對象，右側是構造函數。打印猜測的過程如果建一條原型鏈，可以使用，只是沒有構造函數，也不存在。

1. 構造函數：

構造函數就是普通函數，為了和其他函數區別，第一個字母大寫。
特點：

1.內部使用this表示 實例對象。
2. 生成對象用new關鍵字

2. 構造函數，原型對象和實例對象的關系

const Anim = function (name) {
  this.name = name;
}

const cat = new Anim("cat");

內存圖：

log驗證：

console.log(cat.__proto__);// Anim{}
console.log(Anim.prototype);//Anim{}
console.log(Anim.prototype === cat.__proto__);// true

在node環境中Anim.prototype輸出的是Anim{}，而在瀏覽器環境輸出的更明白一些
截圖

node環境還是有些問題的，建議不要在node環境測試。

3. 其他log

console.log(cat.__proto__);// Anim的prototype,含constructor的對象
console.log(cat.__proto__.__proto__);//Object的prototype,含constructor
console.log(cat.__proto__.__proto__.__proto__);//null

console.log(cat.__proto__);// Anim的prototype,含constructor的對象
console.log(cat.__proto__.__proto__);//Object的prototype,含constructor
console.log(cat.__proto__.__proto__.__proto__);//null

console.log(Anim.__proto__);// Function的prototype，一個含constructor的對象
console.log(Anim.__proto__.__proto__);// Object的prototype，含constructor的對象
console.log(Anim.__proto__.__proto__.__proto__);// null

4. Object.getPrototypeOf()

Object.getPrototypeOf(obj) 獲取對象obj的原型對象相當于obj.__proto__，只是__開頭的是內部屬性，不建議使用，推薦使用Object.getPrototypeOf()

console.log(cat.__proto__);// Anim{}
console.log(Object.getPrototypeOf(cat));// Anim{}
console.log(Anim.__proto__);
console.log(Object.getPrototypeOf(Anim));// [Function]

5. constructor

原型對象prototype對象有一個constructor屬性，指向構造函數對象，而構造函數對象有個prototype屬性指向原型對象。

console.log(Anim.prototype.constructor === Anim);// true

因為constructor在原型對象上，所以所有的實例對象都有constructor屬性，而且都等于Anim.cat本身沒有constructor屬性，constructor是其原型鏈上的屬性。

console.log(cat.constructor === Anim.prototype.constructor);// true
console.log(cat.constructor === Anim);// true

constructor的作用1：判斷實例對象屬于哪個構造函數

function Cat(){}

function Dog(){}

function isDog(obj){
  return obj.constructor === Dog;
}

const black = new Cat();
const white = new Dog();
console.log(isDog(black));// false
console.log(isDog(white));// true

constructor的作用2：實例對象可以調用構造函數

const yellow = new white.constructor();
console.log(isDog(yellow));// true

constructor和prototype都是關聯原型對象和構造函數的紐帶，二者不可只改其一，必須同時修改。 6. instanceof

console.log(yellow instanceof Dog);

左側是實例對象，右側是構造函數。可能會想到原理是

yellow.constructor === Dog

除了使用constructor，還有Object.prototype.isPrototypeOf()，對象實例的isPrototypeOf方法，用來判斷一個對象是否是另一個對象的原型

const date = new Date();

console.log(date instanceof Date);// true
console.log(date instanceof Object);// true

console.log(Date.prototype.isPrototypeOf(date));// true
console.log(Object.prototype.isPrototypeOf(date));// true

instanceof對整個原型鏈上的對象都有效，因此同一個實例對象，可能會對多個構造函數都返回true。

7. Object.create

const a = {
  name:"aaaa",
  log:function(){
    console.log(this.name);
  }
};

const b = Object.create(a);
b.name = "bbb";
const c = Object.create(b);
c.name = "ccc";

打印a,b,c

console.log(a.__proto__ === Object.prototype);// true
console.log(b.__proto__ === a);// true
console.log(c.__proto__ === b);// true

猜測create的過程

b.__proto__ = a;

如果建一條原型鏈，可以使用create，只是沒有構造函數，也不存在prototype。

字面量對象沒有prototype屬性，無法使用new關鍵字創建實例對象。

var o = {
    name:"michael",
    age:10,
    say:()=>{
        console.log("hello");
    }
};

GPU云服務器云服務器 PROTOTYPING Prototypal Prototypes Prototype

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84914.html

高能！typeof Function.prototype 引發的先有 Function 還是先有 O

摘要：有個例外他就是。看左側對象的原型鏈上是否有第一步得到。將各內置引用類型的指向。用實例化出，，以及的行為并掛載。實例化內置對象以及至此，所有內置類型構建完成。最后的最后，你還對是現有還是現有有想法了嗎以上均為個人查閱及實踐總結的觀點。來個摸底測試，說出以下每個表達式的結果 function F(){}; var o = {}; typeof F; typeof o; typeof F...

娣辯孩 2019-08-19 18:33 評論0 收藏0
JavaScript中__proto__與prototype的關系

摘要：了解中原型以及原型鏈只需要記住以下點即可對象都有屬性，指向構造函數的構造函數函數都有屬性，指向構造函數的原型對象的內置構造函數可知所有的構造函數都繼承于甚至包括根構造器及自身。了解JavaScript中原型以及原型鏈只需要記住以下2點即可對象都有__proto__屬性，指向構造函數的prototype 構造函數函數都有prototype屬性，指向構造函數的原型 1、對象的__p...

justjavac 2019-08-26 10:13 評論0 收藏0
淺談javascript中的prototype

摘要：因此，請慎重重寫原型繼承說到就不得說繼承，我們通過給上添加屬性和方法，就能使該構造函數所有的實例對象擁有屬性和方法。本人博客：【www.xiabingbao.com】在本文中，我們講解prototype的內容主要由：什么是prototype，prototype與函數之間的關系，prototype與實例對象之間的關系，使用proto實現一個簡單的繼承。 1. prototype的簡要...

seanHai 2019-08-21 10:33 評論0 收藏0
JS 原型及原型鏈學習

摘要：所以繼承了對象的所有方法，當你用時，會先查一下它的構造函數的原型對象有沒有有方法，沒查到的話繼續查一下的原型對象有沒有這個方法。普通函數與構造函數的區別在命名規則上，構造函數一般是首字母大寫，普通函數遵照小駝峰式命名法。在函數調用的時候： function fn() { } 構造函數：1. new fn( ) 2 .構造函數內部會...

PiscesYE 2019-08-26 13:58 評論0 收藏0
js中的prototype、__proto__、constructor

摘要：一旦原型對象被賦予屬性和方法那么由相應的構造函數創建的實例會繼承上的屬性和方法為什么只有函數才有屬性規范就這么定的。其它的構造器的都是一個對象。哪些對象有原型？所有的對象在默認情況下都有一個原型，因為原型本身也是對象，所以每個原型自身又有一個原型（只有一種例外，默認的對象原型在原型鏈的頂端） prototype屬性prototype是每個函數對象都具有的屬性，被稱為原型對象，而__p...

fizz 2019-08-23 10:25 評論0 收藏0
Javascript面向對象編程（二）：構造函數的繼承

摘要：動物還有一個貓對象的構造函數。這顯然會導致繼承鏈的紊亂明明是用構造函數生成的，因此我們必須手動糾正，將對象的值改為。這是很重要的一點，請務必注意如果替換了對象，下一步必然是為新的對象加上屬性，并將這個屬性指回原來的構造函數。原文鏈接現在有一個動物對象的構造函數。 function Animal() { this.species = 動物; } 還有一個貓對象的構造函數。 fun...

longmon 2019-08-20 14:41 評論0 收藏0