資訊專(zhuān)欄INFORMATION COLUMN
摘要：也就是說(shuō)當(dāng)使用后，當(dāng)前執(zhí)行上下文中的對(duì)象已被替換為，后續(xù)執(zhí)行將以所持有的狀態(tài)屬性繼續(xù)執(zhí)行。借用的方法替換的實(shí)例去調(diào)用相應(yīng)的方法。實(shí)現(xiàn)引用類(lèi)型的繼承其實(shí)沒(méi)有類(lèi)這一概念，我們平時(shí)使用的等嚴(yán)格來(lái)說(shuō)被稱作引用類(lèi)型。
call 方法：
object.method.call(targetObj[, argv1, argv2, .....])
apply 方法：
object.method.apply(targetObj[, [argv1, argv2 .....]])
call 和 apply 的作用沒(méi)有太大區(qū)別，僅是在調(diào)用時(shí)傳遞參數(shù)的方式不同，call 是按位置參數(shù)傳遞，apply 是傳遞一個(gè)參數(shù)數(shù)組。
call 和 apply 方法的作用如下：
以 targetObject 替換 object 引入當(dāng)前的執(zhí)行上下文中。
也就是說(shuō)當(dāng)使用 object.call(targetObj) 后，當(dāng)前執(zhí)行上下文中的 object 對(duì)象已被替換為 targetObj，后續(xù)執(zhí)行將以 targetObj 所持有的狀態(tài)屬性繼續(xù)執(zhí)行。
借用 object 的方法：
targetObj 替換 object 的實(shí)例去調(diào)用相應(yīng)的方法。
// Person 引用類(lèi)型
function Person(name, age) {
this.name = name;
this.age = age;
// Person 的對(duì)象方法
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 引用類(lèi)型
function Boy(name, age) {
this.name = name;
this.age = age;
}
var lilei = new Boy("lilei", 18);
// 調(diào)用 Person 的原型方法
// 注：原型方法和對(duì)象方法并不對(duì)等，雖然二者皆可被對(duì)象繼承 但原型鏈上只有原型方法 沒(méi)有對(duì)象方法
// 所以對(duì)象方法還是要以下面實(shí)例化一個(gè)對(duì)象的方式去調(diào)用，不能直接通過(guò)原型鏈訪問(wèn)
Person.prototype.getInfo.call(lilei, "-", "!");
Person.prototype.getInfo.apply(lilei, ["-", "!"]);
// 調(diào)用 Person 的對(duì)象方法
var person = new Person("none", 0);
person.getName.call(lilei);
person.getInfo.apply(lilei, ["-", "!"]);
Boy 雖然并沒(méi)有定義 getName 對(duì)象方法，也沒(méi)有 getInfo 原型方法，但我們可以方便的使用 call/apply 將 Person 的方法應(yīng)用到 Boy 的實(shí)例上。call/apply 的語(yǔ)意其實(shí)是說(shuō) Person “喊” Boy 的實(shí)例過(guò)來(lái)使用自己的方法。
實(shí)現(xiàn)引用類(lèi)型的繼承：
Javascript 其實(shí)沒(méi)有類(lèi)這一概念，我們平時(shí)使用的 Array, Date, Math 等嚴(yán)格來(lái)說(shuō)被稱作 “引用類(lèi)型”。我們可以方便的使用 call/apply 來(lái)實(shí)現(xiàn)引用類(lèi)型的對(duì)象方法的繼承，從而讓代碼更加的精簡(jiǎn)。
繼承分為 對(duì)象繼承 和 原型鏈繼承 兩部分
// Person 引用類(lèi)型
function Person(name, age) {
this.name = name;
this.age = age;
// Person 的對(duì)象方法
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 引用類(lèi)型
function Boy(name, age) {
// 對(duì)象冒充繼承
// 將 Person 的對(duì)象成員繼承過(guò)來(lái)
Person.call(this, name, age);
}
// 原型鏈繼承
// 將 Person 的原型屬性繼承過(guò)來(lái)
Boy.prototype = new Person();
// ======================================================
var lilei = new Boy("lilei", 18);
lilei.getName();
lilei.getInfo();
console.log(Boy.prototype.getInfo);
注意這里 call/apply 只是繼承父原型的對(duì)象方法，原型方法還需要多帶帶的繼承一次。
平時(shí)開(kāi)發(fā)中比較經(jīng)典的用例就是：
Array.prototype.slice.call(document.getElementsByTagName("p"));
如上代碼會(huì)返回一個(gè)DOM元素?cái)?shù)組，document.getElementsByTagName("p") 獲取到的并不是真正意義上的數(shù)組，沒(méi)辦法使用 pop 或 push 等方法，Array.prototype.slice 的實(shí)現(xiàn)大致如下：
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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/88748.html
摘要：可以通過(guò)構(gòu)造函數(shù)和原型的方式模擬實(shí)現(xiàn)類(lèi)的功能。原型式繼承與類(lèi)式繼承類(lèi)式繼承是在子類(lèi)型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類(lèi)型的構(gòu)造函數(shù)。寄生式繼承這種繼承方式是把原型式工廠模式結(jié)合起來(lái)，目的是為了封裝創(chuàng)建的過(guò)程。 js繼承的概念 js里常用的如下兩種繼承方式： 原型鏈繼承（對(duì)象間的繼承） 類(lèi)式繼承（構(gòu)造函數(shù)間的繼承） 由于js不像java那樣是真正面向?qū)ο蟮恼Z(yǔ)言，js是基于對(duì)象的，它沒(méi)有類(lèi)的概念。...
摘要：原型繼承與類(lèi)繼承類(lèi)繼承是在子類(lèi)型構(gòu)造函數(shù)的內(nèi)部調(diào)用父類(lèi)型的構(gòu)造函數(shù)原型式繼承是借助已有的對(duì)象創(chuàng)建新的對(duì)象，將子類(lèi)的原型指向父類(lèi)。 JavaScript 繼承方式的概念 js 中實(shí)現(xiàn)繼承有兩種常用方式： 原型鏈繼承（對(duì)象間的繼承） 類(lèi)式繼承（構(gòu)造函數(shù)間的繼承） JavaScript不是真正的面向?qū)ο蟮恼Z(yǔ)言，想實(shí)現(xiàn)繼承可以用JS的原型prototype機(jī)制或者call和apply方法 在面...
摘要：舉例說(shuō)明組合繼承組合繼承利用原型鏈借用構(gòu)造函數(shù)的模式解決了原型鏈繼承和類(lèi)式繼承的問(wèn)題。示例組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。 對(duì)js原型和繼承的理解一直處于不懂-懂-不懂-懂-不懂。。。的無(wú)限循環(huán)之中，本來(lái)打算只是簡(jiǎn)單總結(jié)下js繼承方式，可看了些網(wǎng)上的資料后，發(fā)現(xiàn)又不懂繼承了。。。這篇文章只...
摘要：寄生組合式繼承終于寫(xiě)到最后一個(gè)繼承了，我們?cè)谥爸v了種繼承方式，分別是原型鏈，借用構(gòu)造函數(shù)繼承，組合繼承，原型式繼承，寄生式繼承，其中，前三種聯(lián)系比較緊密，后面兩種也比較緊密，而我們要講的最后一種，是和組合繼承還有寄生式繼承有關(guān)系的。 前言 趁周末結(jié)束之前趕緊先把坑填上。上回我們說(shuō)到了原型鏈，并且留下了幾個(gè)思考題，先把答案公布一下。 在最后一個(gè)例子里，console.log(b1.c...
摘要：一面向?qū)ο蟾拍蠲嫦驅(qū)ο缶褪鞘褂脤?duì)象。因此在構(gòu)造函數(shù)中表示剛剛創(chuàng)建出來(lái)的對(duì)象。在構(gòu)造函數(shù)中利用對(duì)象的動(dòng)態(tài)特性為其對(duì)象添加成員。 一、面向?qū)ο?1.1 概念 面向?qū)ο缶褪鞘褂脤?duì)象。面向?qū)ο箝_(kāi)發(fā)就是使用對(duì)象開(kāi)發(fā)。 面向過(guò)程就是用過(guò)程的方式進(jìn)行開(kāi)發(fā)。面向?qū)ο笫菍?duì)面向過(guò)程的封裝。 1.2 三大特性 抽象性所謂的抽象性就是：如果需要一個(gè)對(duì)象描述數(shù)據(jù)，需要抽取這個(gè)對(duì)象的核心數(shù)據(jù) 提出需要的核心...
閱讀 1612·2023-04-26 01:28
閱讀 3392·2021-11-22 13:53
閱讀 1519·2021-09-04 16:40
閱讀 3264·2019-08-30 15:55
閱讀 2750·2019-08-30 15:54
閱讀 2546·2019-08-30 13:47
閱讀 3460·2019-08-30 11:27
閱讀 1207·2019-08-29 13:21
