JavaScript学习笔记—函数中的this
this
- 函数在执行时,JS解析器每次都会传递进一个隐含的参数,即this
- this会指向一个对象,所指向的对象会根据函数调用方式的不同而不同
(1)以函数形式调用时,this指向的是window
(2)以方法的形式调用时,this指向的是调用方法的对象
(3)构造函数中,this是调用方法的对象
(4)箭头函数没有自己的this,由外层作用域决定
(5)通过call和apply调用的函数,他们第一个参数就是函数的this
(6)通过bind返回的函数,this由bind第一个参数决定(无法修改) - 通过this可以在方法中引用调用方法的对象
function fn(){
console.log(this === window); // true
console.log("fn打印", this); // fn打印,window
}
fn();
function fn2(){
console.log("fn2打印", this);
}
const obj = {name:"孙悟空"};
obj.test = fn2;
const obj2 = {name:"猪八戒"};
obj.test(); // this为obj
obj2.test(); // this为obj2
const obj3 = {
name:"沙和尚",
sayHello: function(){
console.log(this.name);
}
};
const obj4 = {
name:"唐僧",
sayHello: function(){
console.log(this.name);
}
};
obj3.sayHello(); // 沙和尚
obj4.sayHello(); // 唐僧
箭头函数的this:
箭头函数没有自己的this,它的this由外层作用域决定,箭头函数的this和它的调用方式无关
function fn(){
console.log("fn -->", this);
}
const fn2 = () => {
console.log("fn2 -->", this);
};
const obj = {
name:"孙悟空",
fn, // 属性名和函数名一样可以省略直接写属性名
fn2, // 属性名和变量名一样时可以省略直接写属性名
sayHello(){ // 可以省略function,直接方法名
console.log(this); // obj
function t(){
console.log("t -->", this);
}
t(); // t -->, window (以函数形式调用时,this指向的是window)
const t2 = () => {
console.log("t2 -->", this);
}
t2(); // t2 -->, obj(箭头函数没有自己的this,它的this由外层作用域决定)
}
};
obj.fn(); // this -->, obj
obj.fn2(); // this -->, window