Function.prototype.call()的使用与实现

最新推荐文章于 2022-10-07 19:51:33 发布

豆子前端

最新推荐文章于 2022-10-07 19:51:33 发布

阅读量1.6k

点赞数 3

分类专栏：前端文章标签： javascript js

本文链接：https://blog.csdn.net/qq_41996454/article/details/108609687

版权

前端专栏收录该内容

177 篇文章 12 订阅

订阅专栏

文章目录

Function.prototype
call()的语法
一些使用例子
手动实现一个call()
参考资料

Function.prototype

Function.prototype.apply()

在一个对象的上下文中应用另一个对象的方法；参数能够以数组形式传入。

Function.prototype.bind()

bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

Function.prototype.call()

在一个对象的上下文中应用另一个对象的方法；参数能够以列表形式传入。

Function.prototype.isGenerator()

若函数对象为generator，返回true，反之返回 false。

Function.prototype.toSource()

获取函数的实现源码的字符串。覆盖了 Object.prototype.toSource 方法。

Function.prototype.toString()

获取函数的实现源码的字符串。覆盖了 Object.prototype.toString 方法。

call()的语法

call与apply 用于显示的设置函数的上下文，两个方法作用一样都是将对象绑定到this，只是在传递参数上有所不同。

call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。
call 可以接收一个参数列表
apply 只接受一个参数数组。
与 bind 不同 call/apply 会立即执行函数

function show(title) {
    console.log(`${title + this.name}`);
}
let lisi = {
    name: '李四'
};
let wangwu = {
    name: '王五'
};
show.call(lisi, '用户1：');
show.apply(wangwu, ['用户2：']);

// 用户1：李四
// 用户2：王五

一些使用例子

找出数组最大值

let arr = [1, 3, 2, 8];
console.log(Math.max(arr)); //NaN
console.log(Math.max.call(Math, ...arr)); //8
console.log(Math.max.apply(Math, arr)); //8
console.log(Math.max(...arr)); //8

设置函数上下文

<body>
    <button message="这是按钮一">button</button>
    <button message="这是按钮二">button</button>
</body>
<script>
    function show() {
        alert(this.getAttribute('message'));
    }
    let bts = document.getElementsByTagName('button');
    for (let i = 0; i < bts.length; i++) {
        bts[i].addEventListener('click', () => show.call(bts[i]));
    }
</script>

构造属性继承

"use strict";
function Request() {
    this.get = function (params = {}) {
        //组合请求参数
        let option = Object.keys(params)
            .map(i => i + "=" + params[i])
            .join("&");

        return `获取数据 API:${this.url}?${option}`;
    };
}

//文章控制器
function Article() {
    this.url = "article/index";
    Request.apply(this, []);
}



//课程控制器
function Lesson() {
    this.url = "lesson/index";
    Request.call(this);
}



let article = new Article();
console.log(
    article.get({
        row: 10,
        start: 3
    })
);


let lesson = new Lesson();

console.log(
    lesson.get({
        row: 20
    })
);

手动实现一个call()

不传入第一个参数，那么默认为 window
改变 this 指向，让新的对象可以执行该函数
给新的对象添加一个函数func，这个函数的上下文属于传入的this
在执行完以后删除func

Function.prototype.myCall = function(context){
    context = context || window

    // 给context添加一个属性
    // getValue.call(a, 'user1', '24') => a.func = getValue
    context.func = this

    let args = [...arguments].slice(1)

    let result = context.func(...args)
    
    // 删除func
    delete context.func

    return result   
}



let arr = [1, 3, 2, 8];
console.log(Math.max(arr)); //NaN
console.log(Math.max(...arr)); //8
console.log(Math.max.apply(Math, arr)); //8
console.log(Math.max.call(Math, ...arr)); //8
console.log(Math.max.myCall(Math, ...arr)); //8