function Pet(name) {
this.name = name;
this.getName = () => this.name;
}
const cat = new Pet('Fluffy');
console.log(cat.getName()); // What is logged?
const { getName } = cat;
console.log(getName()); // What is logged?
答案:'Fluffy'
和 'Fluffy'
当函数作为构造函数new Pet('Fluffy')
调用时,构造函数内部的this
等于构造的对象
Pet
构造函数中的this.name = name
表达式在构造的对象上创建name
属性。
this.getName = () => this.name
在构造的对象上创建方法getName
。而且由于使用了箭头函数,箭头函数内部的this
值等于外部作用域的this
值, 即 Pet
。
调用cat.getName()
以及getName()
会返回表达式this.name
,其计算结果为'Fluffy'
。
2.
const object = {
message: 'Hello, World!',
logMessage() {
console.log(this.message); // What is logged?
}
};
setTimeout(object.logMessage, 1000);
答案:1秒后,打印 undefined
。
尽管setTimeout()
函数使用object.logMessage
作为回调,但仍将object.logMessage
用作常规函数,而不是方法。
在常规函数调用期间,this
等于全局对象,即浏览器环境中的 window。
这就是为什么logMessage
方法中的 this.message
等于 window.message
,即undefined
。
3.
如何使用lowMessage函数,让它打印“hellow,World!”
// Using func.call() method
logMessage.call(object);
// Using func.apply() method
logMessage.apply(object);
// Creating a bound function
const boundLogMessage = logMessage.bind(object);
boundLogMessage();
4.
const object = {
who: 'World',
greet() {
return `Hello, ${this.who}!`;
},
farewell: () => {
return `Goodbye, ${this.who}!`;
}
};
console.log(object.greet()); // What is logged?
console.log(object.farewell()); // What is logged?
答案: 'Hello, World!'
和 'Goodbye, undefined!'
。
当调用object.greet()
时,在greet()
方法内部,this
值等于 object,因为greet
是一个常规函数。因此object.greet()
返回'Hello, World!'
。
但是farewell()
是一个箭头函数,箭头函数中的this
值总是等于外部作用域中的this
值。
farewell()
的外部作用域是全局作用域,它是全局对象。因此object.farewell()
实际上返回'Goodbye, ${window.who}!'
,它的结果为'Goodbye, undefined!'
。
var length = 4;
function callback() {
console.log(this.length); // What is logged?
}
const object = {
length: 5,
method(callback) {
callback();
}
};
object.method(callback, 1, 2);
答案: 4
callback()
是在method()
内部使用常规函数调用来调用的。由于在常规函数调用期间的this
值等于全局对象,所以this.length
结果为window.length
。。
第一个语句var length = 4
,处于最外层的作用域,在全局对象 window
上创建一个属性length
。
var length = 4;
function callback() {
console.log(this.length); // What is logged?
}
const object = {
length: 5,
method() {
arguments[0]();
}
};
object.method(callback, 1, 2);
答案: 3
obj.method(callback, 1, 2)
被调用时有3
个参数:callback
, 1
和2
。结果,method()
内部的参数特殊变量是如下结构的数组类对象:
1 2 3 4 5 6 |
|
因为arguments[0]()
是arguments对象上的回调的方法调用,所以回调内部的参数等于arguments
。所以 callback()
中的this.length
与arguments.length
相同,即3
。
const user = {
email: "my@email",
updateEmail: email => {
console.log(this.email) // undefined
console.log(email) // new
console.log(this) // window
this.email = email
console.log(this.email) // new
}
}
user.updateEmail("new@email")
console.log(user.email) // my