JS中動態(tài)原型模式的理解

superPershing 發(fā)布于2019-08-20 19:05 / 769人閱讀

摘要：動態(tài)原型模式是由構(gòu)造函數(shù)和原型模式組合而成的，那么構(gòu)造函數(shù)是怎樣的呢這是一個典型的構(gòu)造函數(shù)，通過使用函數(shù)，實例化一個對象，那么為什么可以通過使用操作符實例化對象呢，其實在使用操作符的同時，系統(tǒng)會執(zhí)行以下操作執(zhí)行函數(shù)代碼首先默認生成一個對象，

動態(tài)原型模式是由構(gòu)造函數(shù)和原型模式組合而成的，那么構(gòu)造函數(shù)是怎樣的呢：

function Box(name){
        this.name = name;
        this.call = function(){
            alert("your name is "+ this.name)
        }
   }
var box = new Box("obama");

這是一個典型的構(gòu)造函數(shù)，通過使用new函數(shù)，實例化一個box對象，那么為什么可以通過使用new操作符實例化對象呢，其實在使用new操作符的同時，系統(tǒng)會執(zhí)行以下操作；

var box = new Object();
box.__proto__ = Box.prototype;
Box.call(box);
//執(zhí)行函數(shù)代碼
return box;

首先默認生成一個對象，繼承構(gòu)造函數(shù)Box的原型，然后把函數(shù)的作用域綁定在這個對象上，在執(zhí)行函數(shù)，最后返回這個對象，因此每個實例對象都是一個獨立的對象，我們知道每個對象都是不相等的；

var box1 = new Box("a");
var box2 = new box("a");
box1.call == box2.call             //false

原型模式中，

function Bar(){};
Bar.prototype = {
        constructor:Box,
        age:100,
        call:function(){
            alert("your age is" + this.age)
        }
    }

我們都知道使用字面量的寫法，會默認生成Object對象，因此要強制把constructor屬性指向Bar,執(zhí)行的過程是先看自身有沒有這個屬性，有就執(zhí)行，不管原型里是否還有，如果沒有就繼續(xù)查找原型，有就執(zhí)行，沒有就報錯，如何判斷是自身屬性還是原型里的屬性呢；

var bar = new Bar();
bar.name = "obama";
bar.hasOwnProperty("name");        //true
//hasOwnProperty 只會判斷自身是否有這個屬性，原型是否有無法判斷；
"name" in bar;            //true
// in這個方法更近一步能判斷不管自身還是原型有屬性（當然是可以枚舉的屬性）
//通過這兩個方法我們可以判斷原型中是否有屬性
function isProperty(object,property){
        return !object.hasOwnProperty(property) && (property in object);
    }

重點!!原型是會重寫的，這和JS里其他的對象一樣，后面的會覆蓋前面的，還有個問題是如果原型中修改屬性，一個實例對象就會改寫這個值，導致其他的實例對象都會改變！！

function Box(){
}
Box.prototype = {
    constructor:Box,
    boxs:["box1","box2","box3"],
    name:"bigBox"
}
var box1 = new Box();
var box2 = new Box();
box1.name = "first box";
console.log(box1.name);        //"first box"
console.log(box2.name);        //"bigbox"

box1.boxs.push("box4");

console.log(box1.boxs);        //["box1", "box2", "box3", "box4"]
console.log(box2.boxs);         //["box1", "box2", "box3", "box4"]

很難理解為什么box1修改name屬性就不會重寫原型，而修改boxs屬性就會重寫原型，兩者的差別就在于一個是賦值，一個是查找，打個比方，
a向b借了100元，那么a就得到了100元，不是a的父親，爺爺?shù)玫搅?00元，所以賦值即給a添加不論是屬性還是方法收益的只有a,不會給a的父親，爺爺其他人也賦值，但是如果b找a 還的話，如果找不到a就可以找a 的父親爺爺?shù)绕渌耍@個意思是是說，只要是賦值，就只作用在賦值對象上，但是查找就不同，可以一直追溯到其他人，上面的例子，
box1.boxs.push(""box4"),可以這么理解，首先是查找，box1.boxs,不然如何push呢，自身屬性沒有，但是原型上有，有就OK直接操作push,但是這個操作是對象是所有對象共享的，所以一旦修改就改變了！
基于以上的問題，那么動態(tài)原型模式就是把共享的使用原型，不共享的使用構(gòu)造函數(shù)，

function Box(){
    this.name:"bigBox";
    this.boxs = ["box1", "box2", "box3"];
};
Box.prototype = {
    constructor:Box,
    num:function(){
    console.log(this.boxs.length);
    }
}
//或者寫在一起
function Box(){
     this.name:"bigBox",
     this.boxs = ["box1", "box2", "box3"];
    if(typeof this.run != "function"){
        Box.prototype.num = function(){
             console.log(this.boxs.length);
        }
    } 
}
//因為構(gòu)造函數(shù)執(zhí)行時，里面的代碼都會執(zhí)行一遍，而原型有一個就行，不用每次都重復，所以僅在第一執(zhí)行時生成一個原型，后面執(zhí)行就不必在生成，所以就不會執(zhí)行if包裹的函數(shù)，
//其次為什么不能再使用字面量的寫法，我們都知道，使用構(gòu)造函數(shù)其實是把new出來的對象作用域綁定在構(gòu)造函數(shù)上，而字面量的寫法，會重新生成一個新對象，就切斷了兩者的聯(lián)系！

云服務器 GPU云服務器原型模式 js原型鏈的繼承 js閉包的理解你理解中的云服務器ecs是什么

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85111.html

JavaScript設計模式

摘要：可能因為先入為主，在編程之中，往往不由自主地以的邏輯編程思路設計模式進行開發(fā)。這是原型模式很重要的一條原則。關于閉包與內(nèi)存泄露的問題，請移步原型模式閉包與高階函數(shù)應該可以說是設計模式的基礎要領吧。在下一章，再分享一下的幾種常用設計模式。前在學習使用Javascript之前，我的程序猿生涯里面僅有接觸的編程語言是C#跟Java——忽略當年在大學補考了N次的C與VB。從靜態(tài)編程語言，...

keke 2019-08-21 10:38 評論0 收藏0
理解js對象

摘要：將構(gòu)造函數(shù)的作用域賦值給新對象因此指向了新對象執(zhí)行構(gòu)造函數(shù)的代碼為這個新對象添加屬性返回對象最初是用來標識對象類型的。但提到檢測對象類型，還是使用將構(gòu)造函數(shù)當作函數(shù)構(gòu)造函數(shù)與其他函數(shù)唯一區(qū)別。創(chuàng)建對象雖然Object構(gòu)造函數(shù)與對象字面量都能創(chuàng)建單個對象，但這些方式都有明顯的缺點：使用同一個接口創(chuàng)建很多對象，會產(chǎn)生大量重復代碼。 var obj = {}; //對象字面量 va...

zhouzhou 2019-08-21 16:56 評論0 收藏0
JS對象編程的原型和構(gòu)造函數(shù)混合使用

摘要：概括創(chuàng)建自定義類型的最常見方式，就是組合使用構(gòu)造函數(shù)模式與原型模式。應用方式一分開定義，用來理解構(gòu)造函數(shù)與原型方式二動態(tài)原型模式定義，避免獨立的構(gòu)造函數(shù)和原型，更完美的定義形式。概括：創(chuàng)建自定義類型的最常見方式，就是組合使用構(gòu)造函數(shù)模式與原型模式。好處：通過這種方式，不僅每個實例都有自己的一份實例屬性的副本，而且同時又共享著對方法的引用，最大限度的節(jié)省了內(nèi)存。而且這種混合模式還支...

Null 2019-08-21 10:32 評論0 收藏0
JS面向?qū)ο?em>的程序設計_創(chuàng)建對象之組合使用模式-2

摘要：組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建自定義類型的最常見方式，就是組合使用構(gòu)造函數(shù)模式與原型模式。也就是說，寄生構(gòu)造函數(shù)模式下，構(gòu)造函數(shù)創(chuàng)建的對象與在構(gòu)造函數(shù)外創(chuàng)建的對象沒有什么不同。前言最近在細讀Javascript高級程序設計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內(nèi)容引用自《JavaScri...

xuexiangjys 2019-08-23 12:20 評論0 收藏0
我對JavaScript對象的理解

摘要：通過這種操作，就有了構(gòu)造函數(shù)的原型對象里的方法。你也看到了，就是一個普通對象，所以這種寄生式繼承適合于根據(jù)已有對象創(chuàng)建一個加強版的對象，在主要考慮通過已有對象來繼承而不是構(gòu)造函數(shù)的情況下，這種方式的確很方便。原文地址在我的博客, 轉(zhuǎn)載請注明出處，謝謝！標簽： [es5對象、原型, 原型鏈, 繼承] 注意（這篇文章特別長）這篇文章僅僅是我個人對于JavaScript對象的理解，并不是...

roadtogeek 2019-08-21 16:59 評論0 收藏0