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

資訊專欄INFORMATION COLUMN

【JS基礎(chǔ)】原型和原型鏈，構(gòu)造函數(shù)

RobinTang / 331人閱讀

摘要：條原型規(guī)則所有的引用類型數(shù)組對象函數(shù)，都具有對象特性，即可自由擴展屬性除了以外所有的引用類型數(shù)組對象函數(shù)，都有一個隱式原型屬性，屬性值是一個普通的對象所有的函數(shù)，都有一個顯式原型屬性，屬性值也是一個普通的對象所有的引用類型數(shù)組對象函數(shù)，屬性

5條原型規(guī)則

所有的引用類型（數(shù)組、對象、函數(shù)），都具有對象特性，即可自由擴展屬性（除了"null"）以外

所有的引用類型（數(shù)組、對象、函數(shù)），都有一個__proto__ （隱式原型）屬性，屬性值是一個普通的對象

所有的函數(shù)，都有一個 prototype （顯式原型）屬性，屬性值也是一個普通的對象

所有的引用類型（數(shù)組、對象、函數(shù)），__proto__ 屬性值指向它的構(gòu)造函數(shù)的 prototype 屬性值

當試圖得到一個對象（引用類型）的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的 __proto__（即它的構(gòu)造函數(shù)的 prototype）中尋找

var obj = {};
obj.a = 100;
var arr = [];
arr.a = 100;
function fn () {}
fn.a = 100;

console.log(obj.__proto__); // Object
console.log(arr.__proto__); // Array
console.log(fn.__proto__); // ? () { [native code] }

console.log(fn.prototype); // Object

console.log(obj.__proto__ === Object.prototype); // true

如何準確判斷一個變量是數(shù)組類型？

var arr = [];
arr instanceof Array // true
typeof arr // object typeof無法判斷是否是數(shù)組

一個原型鏈繼承的例子

function Elem(id) {
    this.elem = document.getElementById(id);
}

Elem.prototype.html = function (val) {
    var elem = this.elem;
    if (val) {
        elem.innerHTML = val;
        return this; // 鏈式調(diào)用
    } else {
        return elem.innerHTML;
    }
};

Elem.prototype.on = function (type, fn) {
    var elem = this.elem;
    elem.addEventListener(type, fn);
    return this;
};
var div1 = new Elem("articleTitle");

console.log(div1.html());
div1.html("
hello gril~
");
div1.on("click", function () {
    alert("clicked!");
});

div1.html("
hello gril~
").on("click", function () {
    alert("clicked!");
}).html("
Nice to meet you.
");

描述 new 一個對象的過程

創(chuàng)建一個新對象
this指向這個新對象
執(zhí)行代碼，即對this賦值
返回this
function Foo (name, age) {
    // 首先this變成空對象
    this.name = name;
    this.age = age;
    this.class = "class-1";
    // return this; // 默認有這一行
}
var f = new Foo("li", 20);
var f1 = new Foo("wang", 22); // 創(chuàng)建多個對象

構(gòu)造函數(shù)

function Foo (name, age) {
    this.name = name;
}
Foo.prototype.getName = function () {
    console.log(this.name);
};
// 創(chuàng)建實例
var f = new Foo("can");
f.printName = function () {
    console.log(this.name);
};
// 測試
f.printName();
f.getName();
f.toString(); // 要去 f.__proto__.__proto__ 中查找
for (var key in f) {
    // 我們希望循環(huán)得到的是對象本身的屬性，而不希望得到來自原型的屬性
    // 高級瀏覽器已經(jīng)在 for in 中屏蔽了來自原型的屬性
    // 但是建議還是加上這個判斷，保證程序的健壯性
    if (f.hasOwnProperty(key)) {
        console.log(key); // name printName
    }
}

instanceof 用于判斷引用類型屬于哪個構(gòu)造函數(shù)的方法
f instanceof Foo 的判斷邏輯是：f 的__proto__ 一層一層往上，是否對應(yīng)到Foo.prototype，再試著判斷 f instanceof Object

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100174.html

相關(guān)文章

  • JS基礎(chǔ)-原型、原型鏈真的不能一知半解

    摘要：原型鏈和對象的原型是對象實例和它的構(gòu)造函數(shù)之間建立的鏈接，它的值是構(gòu)造函數(shù)的。對象的原型根據(jù)上文提到的構(gòu)造調(diào)用函數(shù)的時候會創(chuàng)建一個新對象，自動將的原型指向構(gòu)造函數(shù)的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內(nèi)容，不少初學者甚至有一定經(jīng)驗的老鳥都不一定能完全說清...

    changfeng1050 評論0 收藏0

  • 【前端基礎(chǔ)進階】JS原型、原型鏈、對象詳解

    摘要：二構(gòu)造函數(shù)我們先復(fù)習一下構(gòu)造函數(shù)的知識上面的例子中和都是的實例。這兩個實例都有一個構(gòu)造函數(shù)屬性，該屬性是一個指針指向。原型鏈其中是對象的實例。 一. 普通對象與函數(shù)對象 JavaScript 中，萬物皆對象！但對象也是有區(qū)別的。分為普通對象和函數(shù)對象，Object 、Function 是 JS 自帶的函數(shù)對象。下面舉例說明 var o1 = {}; var o2 =new Objec...

    explorer_ddf 評論0 收藏0

  • 【JS基礎(chǔ)】原型對象的那些事（二）

    摘要：只是構(gòu)造函數(shù)上的一個屬性，它是一個指針，指向原型對象，并不表示就是原型對象。在上一個例子中，就是一個對象，這個對象可以說是原生構(gòu)造函數(shù)的實例，所以也是一個對象，所以它也有屬性，不過它的指向也就是原型鏈的頂端，再往上就沒有了。 上一篇講了①原型對象是什么；②__proto__、prototype、constructor的關(guān)系；③原型對象的作用；④原型對象帶來的一些需要注意的問題； 沒理解...

    yanbingyun1990 評論0 收藏0

  • 重溫JS基礎(chǔ)--繼承

    摘要：繼承了如上，我們通過方法借調(diào)了超類的構(gòu)造函數(shù)，實際上是在新創(chuàng)建的實力環(huán)境下調(diào)用了構(gòu)造函數(shù)。組合繼承組合繼承的基本思想將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一塊，從而發(fā)揮二者之長的一種繼承模式。繼承方法在上面這個例子中，構(gòu)造函數(shù)定義了兩個屬性和。 在ECMAScript中只支持實現(xiàn)繼承，而且實現(xiàn)繼承主要是依靠原型鏈來實現(xiàn)的。 1. 什么是原型鏈 繼承基本思想：利用原型讓一個引用類型繼承另一個...

    sixleaves 評論0 收藏0

  • JS基礎(chǔ)之數(shù)據(jù)類型、對象、原型、原型鏈、繼承

    摘要：就是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個對象實例的原型對象。構(gòu)造函數(shù)模式可以創(chuàng)建自定義引用類型，可以像創(chuàng)建內(nèi)置對象實例一樣使用操作符。 數(shù)據(jù)類型： 簡單數(shù)據(jù)類型：Undefined、Null、String、Number、Boolean、Symbol 復(fù)雜數(shù)據(jù)類型：Object // Undefined：聲明，但未初始化 // Null：空對象指針 typeof操作符（檢測基本數(shù)據(jù)類型）: ...

    LucasTwilight 評論0 收藏0

  • js基礎(chǔ)（二）：構(gòu)造函數(shù)與原型（看完必懂）

    摘要：寫在最前構(gòu)造函數(shù)和原型模式的使用場景很廣泛，但因為對概念的混淆不清導(dǎo)致無法熟練掌握。換句話說，不必在構(gòu)造函數(shù)中定義對象實例的信息，而是可以將這些信息直接添加到原型對象中，比如下面的方法。 寫在最前：構(gòu)造函數(shù)和原型模式的使用場景很廣泛，但因為對概念的混淆不清導(dǎo)致無法熟練掌握。切圖帶你從代碼和流程圖一步步攻克，純干貨，建議收藏詳看，原型模式理解圖非常重要，務(wù)必多看幾遍！ 前往查看demo源...

    BDEEFE 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<