this指向
函数调用(一般发生在回调函数,函数直接调用)
function test() {
console.log(this); //window 或 严格模式下是undefined
}
setTimeout(function () {
console.log(this); //window setTimeout比较奇怪,默认绑定严格模式下竟然不是undefined
});
隐式调用(谁调用就是指向谁)
const obj = {
name:'joy',
getName(){
console.log(this); //obj
console.log(this.name); //joy
}
};
obj.getName();
call、apply、bind
call()
、apply()
、bind()
都是用来重定义 this 这个对象的!
obj.myFun.call(obj);
obj.myFun.apply(obj);
obj.myFun.bind(obj)();
- 传参方式
call
、bind
、apply
这三个函数的第一个参数都是 this 的指向对象,第二个参数就有差别了。bind
除了返回是函数以外,它的参数和call
一样。
Function.call(obj,[param1[,param2[,…[,paramN]]]]);
Function.apply(obj[,argArray]);
Function.bind(obj,[param1[,param2[,…[,paramN]]]])();
call
第二个参数可以接收任意个参数
apply
第二个参数必须是数组或者类数组,它们会被转换成类数组
注意:若第一参数为null/undefined,this默认指向window
作为构造函数调用时,this 指代 new 出的对象
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
console.log(x); // 2
console.log(o.x); // 1
es6的箭头函数
- 箭头函数的this指向包裹箭头函数的第一个普通函数中的this
window.name = 'win';
const obj1 = {
name: 'joy',
getName: () => {
console.log(this); //window 调用前this是什么函数里面的this就是什么
console.log(this.name); //win
}
};
obj1.getName();