本文主要是介绍js函数方法apply,bind,call,手写new操作符,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
函数方法
函数方法可以用来改变函数的this指向,对于内置的标准函数来说,改变this就相当于改变了函数的作用目标;比如说,对于一个对象的方法toString(),可以将它的使用目标修改成指定的参数,
这里原本是对obj起作用的tostring方法使用call改成了对‘123’起作用,这就是函数方法的作用,改变函数的作用目标(this指向),理解了这个之后下面介绍一下apply,bind,call的用法以及它们的区别
apply
apply(thisArg,args) thisArg :函数执行时的this指向 , args:函数执行时的参数集合
apply 会让执行函数实例并改变函数执行时的this目标
// 全局调用的函数,this指向windows(浏览器)或global(node)
function fn() {console.log(this);}fn()
fn.apply('新this指向')// 对象调用的函数,this指向这个对象
const obj = {fn:function (){console.log(this);}
}obj.fn()
obj.fn.apply('新this指向')
第一次调用this指向全局(浏览器-window,node-global),
第二次调用this指向字符串对象 ‘新的this指向’
第三次调用this指向obj对象
第四次调用this指向字符串对象 ‘新的this指向’
call
call(thisArg,...args) thisArg:函数执行时的this指向 , ...args:函数执行时的参数
效果和apply一样,会执行函数实例,同时改变this指向,但是区别在call提供的实例参数是零散的而非集合
// call(thisArg,...args) 函数执行时的this指向 , 函数执行时的参数
// 效果和apply一样,会执行函数实例,同时改变this指向,但是区别在call提供的实例参数是零散的而非集合function add(a,b,c){console.log(this,a+b+c);
}add(1,2,3);
add.apply('新this指向',[1,2,3]);
add.call('新this指向',1,2,3);
同apply,区别在于apply参数是一个集合,而call是分散的
bind
bind(thisArg,...args) thisArg 函数执行时的this指向 , ...args函数执行时的参数
用法和call一样,但是bind不会立刻执行实例函数,而是返回一个新函数,新函数的this指向变成thisArg
// bind(thisArg,...args) 函数执行时的this指向 , 函数执行时的参数
// 用法和call一样,但是bind不会立刻执行实例函数,而是返回一个新函数,新函数的this指向变成thisArgconst bind = {fn(){console.log(this,this.name)},name: '原来的this指向'
}bind.fn();
const newFn = bind.fn.bind({name:'新的this指向'});// 返回了一个函数 ,没有立即执行原函数
newFn();
在使用bind方法时,fn并没有直接执行,而是返回了一个新函数newFn,newFn和fn逻辑一致但this指向不同
区别
apply | call | bind |
立即执行函数 | 立即执行函数 | 不执行函数返回一个新this指向且逻辑相同的函数 |
参数以单个的可迭代对象(数组)传递 | 参数散列的传递 | 参数散列的传递 |
使用场景举例,判断引用数据的类型
使用typeof判断类型时,只能区分出function和object,对于数组array,set,map等其他的引用数据类型就无法区分了,这时就可以使用object.toString方法来打印判断,
为什么是object.toString?因为虽然object在原型链的最顶层,所有对象都会继承object的方法,但是它们都重写了toString方法,下面以array举例
// array 类型判断let arr = [1,2,3,4,5];
console.log(arr.toString());
console.log(Object.prototype.toString.call(arr));
array重写了toString方法,在调用tostring时,会使用重写后的而不是object.toString,
array.toString会打印出数组的元素,而Object.toString会打印对象的类型,
通过字符串的分割就可以根据另一半的字符判断出对象的类型
new操作符
手写new关键字,new Function() new关键字的作用:
1.新建了一个对象,
2.将函数的prototype属性指向新对象,如果函数的原型不是一个对象(为null),则新对象的原型会保持为{}(Object)
3.执行这个函数并将函数的this指向这个对象
4.如果函数没有返回值或者返回值为基本数据类型值则返回新对象,函数返回值为引用数据类型则返回原函数返回值
注意:new的第4步操作表示作为构造函数不应该返回引用数据类型,最好也不要返回基本数据类型
因为要改变this指向所以这里需要使用函数方法
// 实现一个new/*** @param {Function} fn 构造函数* @param {Array} args 构造函数的参数 * @returns {Object} 返回构造的新对象*/
function myNew(fn,args){const obj = {};// 1if(fn.prototype){// 2Object.setPrototypeOf(obj,fn.prototype);}const result = fn.apply(obj,args); // 3// 4if(typeof result !== 'object'&& typeof result !=='function'){// 基本数据类型return obj;}return result;
}function User(name,age){this.name = name;this.age = age;console.log('构造一个user对象')}const user1 = new User('tom',18);
const user2 = myNew(User,['jerry',18])console.log(user1)
console.log(user2)
可以看到成功构造了新对象,和new的效果基本一致
这篇关于js函数方法apply,bind,call,手写new操作符的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!