call、apply、bind函数封装

call函数

语法：call(Fn, obj, …args)
实现功能：执行Fn函数，改变函数内部this的指向，并将args参数传给Fn

• 封装call函数

	function call(Fn, obj, ...args){
	    if (obj === null || obj === undefined) {
	    //如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，
	        obj = globalThis;//globalThis为全局对象
	    }
	    obj.temp = Fn;
	    let result = obj.temp(...args);
	    delete obj.temp;
	    return result;
	}

• 测试

		function demo(str){
            return str + " --- " + this.testName
        }
        let obj = {
            testName : "call函数测试"
        }
        window.testName = "全局变量"
        console.log(call(demo, obj, "hello"));
        console.log(call(demo, null, "hello"));

运行结果

apply函数

语法：apply(Fn, obj, args)
实现功能：执行Fn函数，改变函数内部this的指向，并将args 数组中的元素作为形参 传给Fn

• 封装apply函数

		function apply(Fn, obj, args){
		    if (obj === null || obj === undefined) {
		        obj = globalThis;
		    }
		    obj.temp = Fn;
		    let result = obj.temp(...args);
		    delete obj.temp;
		    return result;
		}

• 测试

		function demo(str){
            return str + " --- " + this.testName
        }
        let obj = {
            testName : "apply函数测试"
        }
        window.testName = "全局变量"

        console.log(apply(demo, obj, ["hello"]));
        console.log(apply(demo, null, ["hello"]));

运行结果

bind函数

语法：bind(Fn, obj, …args)
实现功能：Fn函数内部this指向改为obj，返回值为改变this指向后的新函数，并将args参数传给Fn

• 封装bind函数

function bind(Fn, obj, ...args){
    return function(...args2){
        return call(Fn, obj, ...args, ...args2)
    };
}

• 测试

        function demo(str){
            return str + " --- " + this.testName
        }
        let obj = {
            testName : "bind函数测试"
        }
        let newFn = bind(demo, obj, "hello");
        console.log(newFn());

        let newFn2 = bind(demo, obj);
        console.log(newFn2("hello222"));

        let newFn3 = bind(demo, obj, "hello33333");
        console.log(newFn3("hello333---444"));

运行结果

第三个输出说明

注意

• call函数和apply函数会内部执行传入的函数