关于javascript中this的trick

Euphoria 发布于2019-08-19 18:00 / 3079人阅读

摘要：看如下对象定义这样能正常调用下面的调用会出错因为，指向已经改变，正确的方式如下所有函数都有其特殊的变量，如下面的调用会产生一个错误解决方案一将保存在不同的变量中解决方案二利用的第二个参数，它可以给指定一个值

看如下对象定义：

</>复制代码 
"use strict"
var jane = {
    name ： ‘Jane’,
    display : function(){
        retrun "Person named " + this.name;
    }
};

这样能正常调用

</>复制代码 
jane.display();

下面的调用会出错：

</>复制代码 
var func = jane.display;
func()
TypeError: Cannot read property "name" of undefined

因为，this指向已经改变，正确的方式如下：

</>复制代码 
var func2 = jane.display.bind(jane);
func2()
"Penson named Jane"

所有函数都有其特殊的this变量，如下面的forEach

</>复制代码 
var jane = {
    name : "Jane",
    friends: ["Tarzan", "Cheeta"],
    sayHiToFriends: function(){
        "use strict";
        this.friends.forEach(function(friend) {
            // "this" is undefined here
            console.log(this.name + " says hi to "+ friend);
        });
    }
}

调用sayHiToFriends会产生一个错误：

</>复制代码 
jane.sayHiToFriends()
TypeError: Cannot read property "name" of undefined

解决方案一：将this保存在不同的变量中

</>复制代码 
var jane = {
    name : "Jane",
    friends: ["Tarzan", "Cheeta"],
    sayHiToFriends: function(){
        "use strict";
        var that = this;
        this.friends.forEach(function(friend) {
            console.log(that.name + " says hi to "+ friend);
        });
    }
}

解决方案二：利用forEach的第二个参数，它可以给this指定一个值

</>复制代码 
var jane = {
    name : "Jane",
    friends: ["Tarzan", "Cheeta"],
    sayHiToFriends: function(){
        "use strict";
        this.friends.forEach(function(friend) {
            console.log(this.name + " says hi to "+ friend);
        }, this);
    }
}

GPU云服务器云服务器 javascript中this详解 javascript的this 关于javascript的问题 javaScript中的this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79073.html

Nodejs中的一些小trick

摘要：要达到想要的效果正确的做法是即用来产生一个立即作用域，保证回调函数执行的时候最近的原型作用域的就是当时循环的。判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回。之前常常因为不注意，习惯用写PHP或者Java的方式来写nodejs，产生了了一些错误，这里总结一些小小的trick，以便于展示nodejs的不同，和平时需要注意的地方。变量提升 var variable = g...

tomorrowwu 2019-08-20 17:44 评论0 收藏0
面试宝典

摘要：有谈谈面试与面试题对于前端面试的一些看法。动态规划算法的思想及实现方法帮大家理清动态规划的解决思路以及原理方法前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。极客学院前端练习题道练习题，面试季练练手。由数据绑定和排序引入的几个 JavaScript 知识点在 JavaScript 的数据绑定和做简单的表格排序中遇到的几个知识点 [[JS 基础...

neu 2019-08-29 14:00 评论0 收藏0
关于JavaScript调试的十来个小Tips

摘要：系列文章的人懒事多，最近翻多写少啊。不过当我们调试我们自己的脚本的时候也会一不小心跳到这些文件中，引发额外的调试任务。系列文章的Github Repo人懒事多，最近翻多写少啊。原文地址这里 ‘debugger;’ 除了console.log，debugger就是另一个我很喜欢的快速调试的工具，将debugger加入代码之后，Chrome会自动在插入它的地方停止，很像C或者Java里面...

Dongjie_Liu 2019-08-19 18:26 评论0 收藏0
【译】让人倾倒的 11 个 npm trick

摘要：没有安装全局某个项目不影响该命令的使用。该标志会安装，忽略。这会确保开发所使用的工具及不会进入生产环境。结果就是，发布项目时，不得不审查两个文件是否同步，防止敏感信息的泄露。确保更改默认的用户名，作为用户名环境变量的值。本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/1206原文：https://nodesource.com/blog/ele...

Tangpj 2019-08-20 10:44 评论0 收藏0
2019 年值得关注的 23 个开发者博客

摘要：如果你正在寻找编程技巧，或是想了解编程界发生了哪些新鲜事那么，今天我们带来的年最佳开发者博客列表，一定是你的菜。地址它是为数不多的印度开发者博客中，能够提供有价值信息的博客。地址又一个专注前端开发的博客。如果你正在寻找编程技巧，或是想了解编程界发生了哪些新鲜事？那么，今天我们带来的 2019 年最佳开发者博客列表，一定是你的菜。这些博客将会帮助你发现新的工具，并带给你编程技巧的启发。...

pepperwang 2019-08-30 15:55 评论0 收藏0