call&apply&bind的js實現以及應用

mgckid 發布于2019-08-23 15:26 / 3149人閱讀

摘要：實現使用是這樣轉換的生成新的函數，新的執行上下文通過在傳入對象中增加調用方法執行被改變，得恢復原來的值實現在這里，我們看到了一個有趣的現象，在中可以傳入數組兩大作用改變借用其他對象的方法改變如何實現執行借用其他對象的方法繼承的實現執行能借用

js實現call

// example
let obj = {
    a: 124,
    b: "ccc"
};
function fn(c) {
    return this.a + this.b + this.c;
}
// 使用call是這樣轉換的
// step 1: 生成新的函數，新的執行上下文(通過在傳入對象中增加調用方法)
const obj = {
    a: 124,
    b: "ccc",
    fn: function(c) {
        return this.a + this.b + this.c;
    }
}
// step2: 執行 obj.fn(333);
let res = obj.fn(333);
// step3: obj被改變，得恢復原來的值
delete obj.fn;

Function.prototype.myCall = function(context) {
    const newContext = context || window;
    newContext.fn = this;
    const args = [];
    for(let i = 1; i < arguments.length; i++) {
        args.push(arguments[i]);
    }
    const res = newContext.fn(...args);
    delete newContext.fn;
    return res;
}
console.log(fn.myCall(obj, "cccc"));

js實現apply

Function.prototype.myApply = function(context, arr) {
    const newContext = context || window;
    newContext.fn = this;
    const args = [];
    let res;
    if (!arr) {
        res = newContext.fn(...args);
    }
    else {
        if (!(arr instanceof Array)) {
            throw new Error("params must be array");
        }
        result = context.fn(...arr);
    }
    delete newContext.fn;
    return res;
    
}
console.log(fn.myApply(obj, ["cccc"]));

call & apply

Math.max.apply(null, [3,5,88,2])
在這里，我們看到了一個有趣的現象，在Math.max中可以傳入數組
call&apply兩大作用：

改變this
借用其他對象的方法

改變this

如何實現Function.prototype.bind()

Function.prototype.bind = function(){
    var self = this,
        context = [].shift.apply(arguments);
        args = [].slice.apply(arguments);
    
    return function(){
        return self.apply(context, [].concat.apply(args, [].slice.apply(arguments)))
    };
}

//執行
var obj = {
    name: "yyh"
}
var func = function(a, b, c, d){
    console.log(this.name);
}.bind(obj, 1, 2);
func(3, 4);

借用其他對象的方法

繼承的實現

var aFn = function(){
    this.name = "yyh"
}
var bFn = function(){
    aFn.apply(this, arguments);
}
bFn.prototype.getName = function(){
    return this.name
}
//執行
var b = new bFn();
console.log(b.getName())

能借用數組的方法，Obj.array.push, 需要滿足兩個條件

Obj的屬性可存取

length屬性可讀寫

var a = {c:3};
[].push.apply(a, [3,4,5])
console.log(a)

云服務器 GPU云服務器 JS中bind、call和apply的作 js中的call和apply js的 &amp標簽 apply與call的區別

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

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

JS系列之call &amp; apply &amp; bind

摘要：參考鏈接在中，和是對象自帶的三個方法，都是為了改變函數體內部的指向。返回值是函數方法不會立即執行，而是返回一個改變了上下文后的函數。而原函數中的并沒有被改變，依舊指向全局對象。原因是，在中，多次是無效的。參考鏈接：https://juejin.im/post/59bfe8... 在JavaScript中，call、apply和bind是Function對象自帶的三個方法，都是為了改變...

xiaochao 2019-08-23 13:09 評論0 收藏0
apply&amp;&amp;call&amp;&amp;bind

摘要：用來改變函數的對象的指向都是用來改變函數的對象的指向的。后面的參數是調用方法的參數。都可以利用后續參數傳參。用來改變函數的this對象的指向都是用來改變函數的this對象的指向的。第一個參數都是this要指向的對象。后面的參數是調用方法的參數。都可以利用后續參數傳參。 var xw={ name: 小王, gender: 男, age: 24, ...

whataa 2019-08-22 15:37 評論0 收藏0
Hard binding &amp; Soft binding detailed explanati

摘要：硬綁定會大大降低函數的靈活性，使用硬綁定之后就無法使用像隱式綁定或顯示綁定來修改。如果可以給默認綁定指定一個全局對象和意外的值，那就可以實現和硬綁定相同的效果，同時保留隱式綁定或顯示綁定修改的能力。 JavaScript中硬綁定與軟綁定詳解 JS中硬綁定這種方式可以把this強制綁定到指定的對象(除了使用new時)，防止函數調用時應用默認綁定規則(非嚴格模式下全局對象-window| ...

xiyang 2019-08-26 12:11 評論0 收藏0
《javascript高級程序設計》函數調用模式 &amp; this深度理解

在上一篇文章（《javascript高級程序設計》筆記：Function類型）中稍微提及了一下函數對象的屬性—this，在這篇文章中有深入的說明：函數的三種簡單調用模式 1 函數模式定義的函數，如果單獨調用，不將其與任何對象關聯，那么就是函數調用模式 function fn(num1, num2) { console.log(this); } // 直接在全局調用 fn();// w...

wyk1184 2019-08-21 16:22 評論0 收藏0
JS手寫bind之處理new的情況詳解

　　你有遇見過給bind返回的函數做new操作的場景，本篇主要講述的就是實現一下兼容new操作的bind寫法，順便學習一下new操作符，為大家提供下參考。　　大家可以去看下關于 JS 中 bind 方法的實現的文章，并給出了實現：　　Function.prototype.myBind=function(thisArg,...prefixArgs){ 　　constfn=this; 　　return...

3403771864 2022-11-19 22:09 評論0 收藏0