国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【JS基礎】原型和原型鏈，構造函數

RobinTang / 324人閱讀

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

5條原型規則

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

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

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

所有的引用類型（數組、對象、函數），__proto__ 屬性值指向它的構造函數的 prototype 屬性值

當試圖得到一個對象（引用類型）的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的 __proto__（即它的構造函數的 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

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

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

一個原型鏈繼承的例子

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("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 一個對象的過程

創建一個新對象
this指向這個新對象
執行代碼，即對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); // 創建多個對象

構造函數

function Foo (name, age) {
    this.name = name;
}
Foo.prototype.getName = function () {
    console.log(this.name);
};
// 創建實例
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) {
    // 我們希望循環得到的是對象本身的屬性，而不希望得到來自原型的屬性
    // 高級瀏覽器已經在 for in 中屏蔽了來自原型的屬性
    // 但是建議還是加上這個判斷，保證程序的健壯性
    if (f.hasOwnProperty(key)) {
        console.log(key); // name printName
    }
}

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

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

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

相關文章

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

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

    changfeng1050 評論0 收藏0

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

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

    explorer_ddf 評論0 收藏0

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

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

    yanbingyun1990 評論0 收藏0

  • 重溫JS基礎--繼承

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

    sixleaves 評論0 收藏0

  • JS基礎之數據類型、對象、原型、原型鏈、繼承

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

    LucasTwilight 評論0 收藏0

  • js基礎（二）：構造函數與原型（看完必懂）

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

    BDEEFE 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<