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在线工具