04.使用 this 关键词使代码更可复用

说明

上一个挑战介绍了向 duck 对象引入一个 method 。它使用 duck.name 的点符号来访问 return 语句中的 name 属性的值:

sayName: function() { return "这个鸭子的名字是" +  duck.name  +"."; }

虽然这是访问对象属性的有效方法,但这里存在一个缺陷。如果变量名称更改,则引用原始名称的所有代码都需要更新。在一个简短的对象定义中,它不是问题,但是如果一个对象有很多对它的属性的引用,就有很大的几率产生错误。

避免这些问题的方法是使用 this 关键词:

var duck = {
   name: "Aflac",
   numLegs:  2,
   sayName: function() { return "这个鸭子的名字是" +
this.name  + "."; }
};

this 是一个很深的话题,上面的例子只是一种使用它的方式。在当前的语境中,this 是指与方法相关联的对象:duck

如果对象的名称更改为 mallard ,则无需在代码中找到所有对 duck 的引用。它使代码可复用并易于阅读。


练习

修改 dog.sayLegs 方法以删除对dog的所有引用。使用上面的 duck 示例进行指导。

var dog = {
name: "Spot",
numLegs: 4,
sayLegs: function() {return "这条狗有" + dog.numLegs + "条腿";}
};

alert(dog.sayLegs()); 

答案

方法 描述
alert() 显示带有一条指定消息和一个 确认 按钮的警告框。
this 表示函数的调用对象。
var dog = {
name: "Spot",
numLegs: 4,
sayLegs: function() {return "这条狗有" + this.numLegs + "条腿";}
};

alert(dog.sayLegs()); 

运行结果

这条狗有4条腿

在线测试

JavaScript在线工具

发布了56 篇原创文章 · 获赞 1 · 访问量 825

猜你喜欢

转载自blog.csdn.net/weixin_44790207/article/details/104967393