浅谈JS中几种轻松处理’this’指向方式资源-CSDN文库

31 浏览量 2020-12-13 14:27:33 上传评论收藏 65KB PDF 举报

资源推荐

资源详情

资源评论

浅谈浅谈JS中几种轻松处理中几种轻松处理’this’指向方式指向方式

我喜欢在JS中更改函数执行上下文的指向，也称为 this 指向。

例如，咱们可以在类数组对象上使用数组方法：

const reduce = Array.prototype.reduce;

function sumArgs() {

return reduce.call(arguments, (sum, value) => {

return sum += value;

});

}

sumArgs(1, 2, 3); // => 6

另一方面，this 很难把握。

咱们经常会发现自己用的 this 指向不正确。下面的教你如何简单地将 this 绑定到所需的值。

在开始之前，我需要一个辅助函数execute(func)，它仅执行作为参数提供的函数。

function execute(func) {

return func();

}

execute(function() { return 10 }); // => 10

现在，继续理解围绕this错误的本质:方法分离。

1.方法分离问题方法分离问题

假设有一个类Person包含字段firstName和lastName。此外，它还有一个方法getFullName()，该方法返回此人的全名。如下所

示：

function Person(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

this.getFullName = function() {

this === agent; // => true

return `${this.firstName} ${this.lastName}`;

}

}

const agent = new Person('前端', '小智');

agent.getFullName(); // => '前端小智'

可以看到Person函数作为构造函数被调用：new Person(‘前端’, ‘小智’)。函数内部的 this 表示新创建的实例。

getfullname()返回此人的全名:’前端小智’。正如预期的那样，getFullName()方法内的 this 等于agent。

如果辅助函数执行agent.getFullName方法会发生什么：

execute(agent.getFullName); // => 'undefined undefined'

执行结果不正确:’undefined undefined’，这是 this 指向不正确导致的问题。

现在在getFullName() 方法中，this的值是全局对象（浏览器环境中的 window ）。 this 等于 window，${window.firstName}

${window.lastName} 执行结果是 ‘undefined undefined’。

发生这种情况是因为在调用execute(agent.getFullName)时该方法与对象分离。基本上发生的只是常规函数调用（不是方法调

用）：

execute(agent.getFullName); // => 'undefined undefined'

// 等价于:

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38731226

粉丝: 5
资源: 926

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip