JavaScript 函数范围问题答案

【问题标题】：JavaScript function scope questionJavaScript 函数范围问题
【发布时间】：2011-11-13 12:20:06
【问题描述】：

请参考以下代码

function createCar(sColor, iDoors, iMpg) {
    var oTempCar = new Object;
    oTempCar.color = sColor;
    oTempCar.doors = iDoors;
    oTempCar.mpg = iMpg;
    oTempCar.showColor = function () {
        alert(this.color)
    };
    return oTempCar;
}
var oCar1 = createCar("red", 4, 23);
var oCar2 = createCar("blue", 3, 25);
oCar1.showColor(); //outputs “red”
oCar2.showColor(); //outputs “blue”

我的问题是上述函数中 return 的主要用途是什么？是否返回由函数创建的对象并将其所有属性分配给 oCar1 和 oCar2 [在我们的示例中] 因为不返回此函数失败。

【问题讨论】：

您已经回答了自己的问题。你还有什么想知道的吗？
是的，您应该始终理智地缩进代码以摆脱狂妄自大。

标签： javascript return

【解决方案1】：

就是返回新创建的对象（oTempCar）。

没有return，undefined 将被隐式分配给oCar1 和oCar2。

【讨论】：

【解决方案2】：

这是正确缩进的代码。

如您所见，return 是createCar 函数的一部分。如果没有返回，它将返回undefined，因此oCar1 和oCar2 将无法正确设置，并且变量上将不存在showColor() 方法。

只是说显而易见的；确定范围的是括号{}。 return 属于括号{} 的范围，在本例中为creatCar 范围/括号。

function createCar(sColor, iDoors, iMpg) {
    var oTempCar = new Object;
    oTempCar.color = sColor;
    oTempCar.doors = iDoors;
    oTempCar.mpg = iMpg;
    oTempCar.showColor = function () {
        alert(this.color)
    };
    return oTempCar;
}
var oCar1 = createCar("red", 4, 23);
var oCar2 = createCar("blue", 3, 25);
oCar1.showColor(); //outputs “red”
oCar2.showColor(); //outputs “blue”

【讨论】：

【解决方案3】：

function createCar(sColor, iDoors, iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.showColor = function () {
      alert(this.color)
    };
}
var oCar1 = new createCar("red", 4, 23);
var oCar2 = new createCar("blue", 3, 25);
oCar1.showColor(); //outputs “red”
oCar2.showColor(); //outputs “blue”

这个也一样。你需要一个“新”。

【讨论】：

【解决方案4】：

你所拥有的是一个构造函数。它是一种特殊的函数，可以让 JavaScript 对那些 C 和 Java 人来说更具可读性。

你问它有什么特别之处？
好吧，这只是出于您提到的原因而没有返回您正在玩的对象。如果什么都不返回，它会返回一个空对象this 的值。通常在函数中this 引用window 或其他基于情况的事物，如o.method this 在正常情况下将引用o。在你的情况下，这是一个构造函数，你用 new 调用它，所以this 是指一个新的空对象，原型设置为createCar.prototype，prototype.constructor 指向createCar.prototype.constructor，在你的情况下是createCar .正如上面的答案所指出的，如果你修改它，你会得到你似乎期望的行为，这是正常工作的事情。

这些答案看起来仍然像 C 代码，那么我们如何让它变得有趣的 JavaScript 代码呢？试试这个：

function createCar(sColor, iDoors, iMpg) {

    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    //return this; //Not needed, but is what happens under the covers
}

createCar.prototype = {

    showColor: function(){

        alert( this.color );
    }
}

var oCar1 = createCar("red", 4, 23);
var oCar2 = createCar("blue", 3, 25);
oCar1.showColor(); //alerts “red”
oCar2.showColor(); //alerts “blue”

再一次，啊，太无聊了！让我们做点更有趣的事

createCar.prototype.showColor.call( oCar1 );  //Alerts "red"
createCar.prototype.showColor.call( new createCar( "red" ) );  //Also alerts red

TBH，我从不使用构造函数，但它是让你的脚湿透的好方法。

【讨论】：