const user = { name: "Praveen", videos: ["html", "css", "js"], greet() { console.log(`welcome ${this.name}`); const getVideos = () => { console.log(`You have ${this.videos.length} videos`); }; getVideos(); }, };user.greet();我可以访问videos.length上面代码中的值（我使用了箭头函数），但我无法访问videos.length下面代码中的值：const user = { name: "Praveen", videos: ["html", "css", "js"], greet() { console.log(`welcome ${this.name}`); const getVideos = function () { console.log(`You have ${this.videos.length} videos`); }; getVideos(); }, };user.greet();
3 回答
茅侃侃
TA贡献1842条经验 获得超21个赞
用关键字定义的函数function将有自己的this，而箭头函数则没有（doc）
因此，在您的情况下，当您在示例 1 中使用箭头函数时，将this引用user，而在示例 2 中，this将引用getVideos
要解决此问题，您可以将this其存储user到一个新变量中
const user = {
name: "Praveen",
videos: ["html", "css", "js"],
greet() {
console.log(`welcome ${this.name}`)
const self = this // notice me
const getVideos = function () {
console.log(`You have ${self.videos.length} videos`)
}
getVideos()
},
}
user.greet()
或者使用call然后将this参考应用user到getVideos
const user = {
name: "Praveen",
videos: ["html", "css", "js"],
greet() {
console.log(`welcome ${this.name}`)
const getVideos = function () {
console.log(`You have ${this.videos.length} videos`)
}
getVideos.call(this) // notice me
},
}
user.greet()
阿晨1998
TA贡献2037条经验 获得超6个赞
getVideos()在没有上下文的情况下被调用，因此this指的是窗口对象。
解决此问题的首选方法是使用箭头函数，如第一个示例所示。
一个预箭头功能的方法是做这样的事情：
const user = {
name: "Praveen",
videos: ["html", "css", "js"],
greet() {
console.log(`welcome ${this.name}`);
const that = this; // <---- that now refers to this context
const getVideos = function () {
console.log(`You have ${that.videos.length} videos`); // <--- use that instead of this
};
getVideos();
},
};
九州编程
TA贡献1785条经验 获得超4个赞
在这里你应该使用箭头函数。这是使用 JavaScript 的 HTML 代码
<!DOCTYPE html>
<html>
<head>
<script>
const user = {
name: "Praveen",
videos: ["html", "css", "js"],
greet() {
console.log(`welcome ${this.name}`);
const getVideos = () => {
console.log(`You have ${this.videos.length} videos`);
};
getVideos();
},
};
user.greet();
</script>
</head>
<body>
</body>
</html>
添加回答
举报
0/150
提交
取消