JavaScript原型與原型鏈

最後更新：2018-04-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：html png typeof [] 傳參 OLE 物件導向 alert add

原型鏈是js物件導向的基礎，非常重要。一，建立對象的幾種方法：1，字面量

var o1 = {    name:‘o1‘};

2，建構函式

var M = function(name){    this.name = name;};var o2 = new M(‘o2‘);

var a = {} 其實是 var a = new Object()的文法糖，推薦使用前者var a = [] 其實是 var a = new Array()的文法糖，推薦使用前者function Foo(){} 其實是 var Foo = new Function()的文法糖，推薦使用前者 3，Object.create（ Object.create()方法建立一個新對象，使用現有的對象來提供新建立的對象的__proto__。）

var P = {name:‘o3‘};var o3 = Object.create(P);

二，原型鏈

JavaScript 規定，所有對象都有自己的原型對象（prototype）。一方面，任何一個對象，都可以充當其他對象的原型；另一方面，由於原型對象也是對象，所以它也有自己的原型。因此，就會形成一個“原型鏈”（prototype chain）：對象到原型，再到原型的原型……那麼，Object.prototype對象有沒有它的原型呢？回答是Object.prototype的原型是null。null沒有任何屬性和方法，也沒有自己的原型。因此，原型鏈的盡頭就是null。

 Object.getPrototypeOf(Object.prototype) //null

Object.prototype === Object.getPrototypeOf( {} ); //true

5條原型規則1，所有的參考型別（數組，對象，函數），都具有對象特性，即可自由擴充屬性2，所有的參考型別（數組，對象，函數），都有一個__proto__屬性（隱式原型），屬性值是一個普通的對象3，所有的函數，都有一個prototype屬性（顯式原型），屬性值也是一個普通的對象4，所有的參考型別（數組，對象，函數）__proto__屬性值指向它的建構函式的prototype屬性值5，當試圖得到一個參考型別（數組，對象，函數）的某個屬性時，如果這個參考型別本身沒有這個屬性，那麼會去它的__proto__（即它的建構函式的prototype）中尋找

看

三，instanceof原理

判斷一個函數是否是一個變數的建構函式

工作原理：判斷執行個體對象的__proto__屬性和建構函式的prototype是否同一個地址，只要在原型鏈上的建構函式，都會被instanceof認為是執行個體的建構函式。

    // 判斷執行個體對象的proto屬性和建構函式的prototype是否同一個地址    // 只要在原型鏈上的建構函式，都會被instanceof認為是執行個體的建構函式    var M = function(name) { this.name = name; };    var o2 = new M(‘o2‘);    o2.__proto__ === M.prototype //true    M.prototype.__proto__ === Object.prototype //true    o2.__proto__.__proto__ === Object.prototype //true    o2 instanceof M //true    o2 instanceof Object //true    // 用constructor屬性判斷更嚴謹    o2.__proto__.constructor === M //true    o2.__proto__.constructor === Object //false

四，new運算子工作原理

    // new運算子及背後工作原理 new後跟建構函式    // 1，一個新對象被建立，它繼承自func.prototype（建構函式的原型對象）    // 2，建構函式func被執行，執行的時候，相應的傳參會被傳入，同時上下文（this）會被指定為這個新執行個體    // 3，如果建構函式返回了一個“對象”，那麼這個對象會取代整個new出來的結果，如果建構函式沒有返回對象，那麼new出來的結果為步驟1建立的對象    var new2 = function(func) {        var o = Object.create(func.prototype);        var k = func.call(o);        if (typeof k === ‘object‘ && k != null) {            return k;        } else {            return o;        }    };

五，原型鏈繼承的例子

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>proto</title></head><body>    <div id="div1">123</div>    <script>    // 封裝DOM查詢    function Elem(id) {        this.elem = document.getElementById(id);    }    Elem.prototype.html = function(val) {        var elem = this.elem;        if (val) {            elem.innerHTML = val;            return this;//方便鏈式操作        } else {            return elem.innerHTML;        }    }    Elem.prototype.on = function(type, fn) {        var elem = this.elem;        elem.addEventListener(type, fn);        return this;//方便鏈式操作    }    var div1 = new Elem(‘div1‘);    console.log(div1.html());    div1.html(‘<p>234p</p>‘).on(‘click‘, function() {        alert(‘1‘);    }).html(‘<p>js</p>‘);    </script></body></html>

JavaScript原型與原型鏈

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More