js 中的 call / apply 方法詳解和引用類型的繼承

cod7ce 發布于2019-08-21 16:48 / 2075人閱讀

摘要：也就是說當使用后，當前執行上下文中的對象已被替換為，后續執行將以所持有的狀態屬性繼續執行。借用的方法替換的實例去調用相應的方法。實現引用類型的繼承其實沒有類這一概念，我們平時使用的等嚴格來說被稱作引用類型。

call 方法：
object.method.call(targetObj[, argv1, argv2, .....])

apply 方法：
object.method.apply(targetObj[, [argv1, argv2 .....]])

call 和 apply 的作用沒有太大區別，僅是在調用時傳遞參數的方式不同，call 是按位置參數傳遞，apply 是傳遞一個參數數組。

call 和 apply 方法的作用如下：

以 targetObject 替換 object 引入當前的執行上下文中。

也就是說當使用 object.call(targetObj) 后，當前執行上下文中的 object 對象已被替換為 targetObj，后續執行將以 targetObj 所持有的狀態屬性繼續執行。

借用 object 的方法：
targetObj 替換 object 的實例去調用相應的方法。

// Person 引用類型
function Person(name, age) {
    this.name = name;
    this.age  = age;
    // Person 的對象方法
    this.getName = function () {
        console.log(this.name);
    }
}

// Person 的原型方法
Person.prototype.getInfo = function (joinStr, endLine) {
    joinStr = joinStr || "-";
    endLine = endLine || "!";
    console.log(this.name + joinStr + this.age + endLine);
}

// Boy 引用類型
function Boy(name, age) {
    this.name = name;
    this.age  = age;
}

var lilei  = new Boy("lilei", 18);

// 調用 Person 的原型方法
// 注：原型方法和對象方法并不對等，雖然二者皆可被對象繼承 但原型鏈上只有原型方法 沒有對象方法
// 所以對象方法還是要以下面實例化一個對象的方式去調用，不能直接通過原型鏈訪問
Person.prototype.getInfo.call(lilei, "-", "!");
Person.prototype.getInfo.apply(lilei, ["-", "!"]);

// 調用 Person 的對象方法
var person = new Person("none", 0);
person.getName.call(lilei);
person.getInfo.apply(lilei, ["-", "!"]);

Boy 雖然并沒有定義 getName 對象方法，也沒有 getInfo 原型方法，但我們可以方便的使用 call/apply 將 Person 的方法應用到 Boy 的實例上。call/apply 的語意其實是說 Person “喊” Boy 的實例過來使用自己的方法。

實現引用類型的繼承：

Javascript 其實沒有類這一概念，我們平時使用的 Array, Date, Math 等嚴格來說被稱作 “引用類型”。我們可以方便的使用 call/apply 來實現引用類型的對象方法的繼承，從而讓代碼更加的精簡。

繼承分為對象繼承和原型鏈繼承兩部分

// Person 引用類型
function Person(name, age) {
    this.name = name;
    this.age  = age;
    // Person 的對象方法
    this.getName = function () {
        console.log(this.name);
    }
}

// Person 的原型方法
Person.prototype.getInfo = function (joinStr, endLine) {
    joinStr = joinStr || "-";
    endLine = endLine || "!";
    console.log(this.name + joinStr + this.age + endLine);
}

// ======================================================
// Boy 引用類型
function Boy(name, age) {
    // 對象冒充繼承
    // 將 Person 的對象成員繼承過來
    Person.call(this, name, age);
}

// 原型鏈繼承
// 將 Person 的原型屬性繼承過來
Boy.prototype = new Person();
// ======================================================

var lilei  = new Boy("lilei", 18);

lilei.getName();
lilei.getInfo();
console.log(Boy.prototype.getInfo);

注意這里 call/apply 只是繼承父原型的對象方法，原型方法還需要多帶帶的繼承一次。

平時開發中比較經典的用例就是：

Array.prototype.slice.call(document.getElementsByTagName("p"));

如上代碼會返回一個DOM元素數組，document.getElementsByTagName("p") 獲取到的并不是真正意義上的數組，沒辦法使用 pop 或 push 等方法，Array.prototype.slice 的實現大致如下：

Array.prototype.slice = function (start, end) {
    var temp  = [];
    var start = start || 0;
    var end   = end || this.length - 1;
    
    for (var i = start; i <= end; i ++) {
        temp.push(this[i]);
    }
    
    return temp;
}

GPU云服務器云服務器 js中的call和apply JS中bind、call和apply的作 apply與call的區別 js引用類型的存儲

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

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

JavaScript繼承方式詳解

摘要：可以通過構造函數和原型的方式模擬實現類的功能。原型式繼承與類式繼承類式繼承是在子類型構造函數的內部調用超類型的構造函數。寄生式繼承這種繼承方式是把原型式工廠模式結合起來，目的是為了封裝創建的過程。 js繼承的概念 js里常用的如下兩種繼承方式：原型鏈繼承（對象間的繼承）類式繼承（構造函數間的繼承）由于js不像java那樣是真正面向對象的語言，js是基于對象的，它沒有類的概念。...

Yangyang 2019-08-21 10:23 評論0 收藏0
JavaScript 繼承方式詳解

摘要：原型繼承與類繼承類繼承是在子類型構造函數的內部調用父類型的構造函數原型式繼承是借助已有的對象創建新的對象，將子類的原型指向父類。 JavaScript 繼承方式的概念 js 中實現繼承有兩種常用方式：原型鏈繼承（對象間的繼承）類式繼承（構造函數間的繼承） JavaScript不是真正的面向對象的語言，想實現繼承可以用JS的原型prototype機制或者call和apply方法在面...

YuboonaZhang 2019-08-19 17:59 評論0 收藏0
js原型和繼承

摘要：舉例說明組合繼承組合繼承利用原型鏈借用構造函數的模式解決了原型鏈繼承和類式繼承的問題。示例組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。對js原型和繼承的理解一直處于不懂-懂-不懂-懂-不懂。。。的無限循環之中，本來打算只是簡單總結下js繼承方式，可看了些網上的資料后，發現又不懂繼承了。。。這篇文章只...

Hujiawei 2019-08-21 13:49 評論0 收藏0
詳解js中的繼承（二）

摘要：寄生組合式繼承終于寫到最后一個繼承了，我們在之前講了種繼承方式，分別是原型鏈，借用構造函數繼承，組合繼承，原型式繼承，寄生式繼承，其中，前三種聯系比較緊密，后面兩種也比較緊密，而我們要講的最后一種，是和組合繼承還有寄生式繼承有關系的。前言趁周末結束之前趕緊先把坑填上。上回我們說到了原型鏈，并且留下了幾個思考題，先把答案公布一下。在最后一個例子里，console.log(b1.c...

evin2016 2019-08-20 15:14 評論0 收藏0
JavaScript面向對象核心知識歸納

摘要：一面向對象概念面向對象就是使用對象。因此在構造函數中表示剛剛創建出來的對象。在構造函數中利用對象的動態特性為其對象添加成員。一、面向對象 1.1 概念面向對象就是使用對象。面向對象開發就是使用對象開發。面向過程就是用過程的方式進行開發。面向對象是對面向過程的封裝。 1.2 三大特性抽象性所謂的抽象性就是：如果需要一個對象描述數據，需要抽取這個對象的核心數據提出需要的核心...

TalkingData 2019-08-22 10:41 評論0 收藏0