this
关键字是在函数执行时被解析的。它指向一个对象,这个对象是在调用函数时传入的。或者说,在调用函数时,this
的值由函数的调用方式来决定。例如:
function person() {
this.name = "Tom";
}
var a = new person();
console.log(a.name); // "Tom"
在上面的代码中,我们使用了new
操作符来调用函数。new
操作符会创建一个新的对象,并且将它作为this
参数传递给函数。因此,在person
函数中,this
指向了新创建的对象。
this
有什么影响?对于箭头函数,this
指向的是函数定义时所在的上下文,而不是调用时的上下文。例如:
const person = {
name: "Tom",
age: 26,
getAge: function() {
const self = this;
setTimeout(function() {
console.log("age is", self.age); // age is 26
}, 1000);
setTimeout(() => {
console.log("age is", this.age); // age is 26
}, 1000);
}
};
person.getAge();
在上面的代码中,getAge
方法中的第一个setTimeout
函数使用了普通函数来定义,因此this
指向的是全局对象。而第二个setTimeout
使用了箭头函数,因此this
指向的是person
对象。
bind
、 call
和 apply
的作用是什么?bind
、 call
和 apply
可以用来显式地指定函数的上下文。它们的作用如下:
bind
:创建一个新的函数,这个函数的this
值被绑定到指定的对象上,并且可以传递参数。call
:调用一个函数,并且指定这个函数的this
值和参数。参数是以逗号分隔的。apply
:调用一个函数,并且指定这个函数的this
值和参数。参数是以数组的形式传递的。例如:
function person() {
console.log(this.name);
}
var a = {name: "Tom"};
var b = {name: "Jerry"};
var personA = person.bind(a);
personA(); // "Tom"
person.call(b); // "Jerry"
var args = [1, 2, 3];
person.apply(a, args); // "Tom"
this
与new
操作符的关系是什么?在使用new
操作符时,this
指向的是新创建的对象。例如:
function person(name) {
this.name = name;
}
var a = new person("Tom");
console.log(a.name); // "Tom"
在上面的代码中,我们使用new
操作符来创建一个新的person
对象。person
函数中的this
指向的就是这个新创建的对象。
this
值?闭包可以对函数中的this
值造成影响。例如:
function person(name) {
this.name = name;
var self = this;
setTimeout(function() {
console.log(self.name); // "Tom"
console.log(this.name); // undefined
}, 1000);
}
var a = new person("Tom");
在上面的代码中,setTimeout
函数创建了一个闭包。在这个闭包中,this
指向的是全局对象,而不是person
对象。因此,在闭包中使用了一个名为self
的变量来保存this
的值,以确保在闭包中引用的是person
对象。
this
?在对象中使用this
是非常方便的。我们可以使用this
来引用对象的属性和方法。例如:
const person = {
name: "Tom",
age: 26,
sayHello: function() {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}
};
person.sayHello(); // Hello, my name is Tom, I'm 26 years old.
在上面的代码中,sayHello
方法中的this
关键字可以引用person
对象中的属性和方法,从而动态创建输出语句。
this
,该怎么办?如果函数中没有this
,则不需要使用this
。例如:
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3
在上面的代码中,add
函数中没有使用this
关键字。因此,我们可以直接调用函数,而不需要担心this
的上下文。