了解 Javascript 函数中属性的执行

Question

我开始学习 javascript，我对 javascript 函数中属性的执行感到困惑。

假设我有这样的功能

function Counter() {
  this.num = 0;
this.timer = console.log('hey');
};

现在在这个函数中，我有 num 和 timer 作为函数 Counter 的属性。当我尝试创建函数构造函数的实例时，计时器属性被执行

但是当我尝试显式调用计时器属性时，我没有得到值/ 属性没有被执行。

背后的原因是什么？

Answer 1

这很容易。

this.timer = console.log('hey');

此行将 console.log('hey') 的 return 值分配给属性 timer。

console.log 在控制台中打印，但不 return 任何内容，因此您的属性保持 undefined.

您感到困惑，因为您混淆了控制台中打印的内容和实际的 return 值。

如果您只是运行在控制台中输入以下内容：console.log('hey')，您将看到以下内容：hey 然后是 undefined。 console.log 函数打印什么，然后是它的 return 值。

Answer 2

now in this function, i have num and timer as a properties of the function Counter.

不，您有对象 的 num 和 timer 属性是通过 调用 Counter 作为构造函数创建的（通过 new，或Reflect.construct，等等）。

but when i try to call the timer property explicitly, i am not getting the value / the property is not getting executed

只是简要介绍一下术语（因为这将有助于您继续学习），您不需要 "call" 属性，并且属性不是 "executed." 您 "get" 它们的价值，或 "access" 他们，或 "read" 他们。（或者，当他们在作业的左侧时，您 "set" 他们或 "assign to" 他们或 "write to" 他们。）

您的代码成功获取 timer 属性的值，这是 console.log('hey') 返回的值，即 undefined.

如果您打算用 timer 做某事以使其成为运行 console.log，您需要将其放入函数中：

this.timer = function() {
    console.log('hey');
};

然后调用它（因为你执行 "call" 函数）：

d.timer();

旁注：

If 这就是你想要做的，虽然在构造函数中创建函数是完全没问题的，但将它们分配给 new Counter 将给予它创建的对象。使用 ES5 及更早版本，您可以这样做：

function Counter() {
    this.num = 0;
} // <== No ; here, it's a declaration, not a statement

Counter.prototype.timer = function() {
    console.log('hey');
};

在 ES2015+ 中，您可能会改用 class 语法：

class Counter() {
    constructor() {
        this.num = 0;
    }

    timer() {
        console.log('hey');
    };
}

您以相同的方式使用它们（通过 new）。

Answer 3

在使用 Counter 作为构造函数创建新对象时，会创建一个具有 2 个属性的新对象，即 num 和 timer。 num 被初始化为 0 而 timer 被初始化为 console.log() 函数的 return 值，即 undefined。这个 return 值存储为计时器属性的值，每次你在阅读它时得到它。

如果我没理解错的话，你想给timer属性添加一些功能作为一个函数，你可以通过把它添加到[=的原型属性中来实现11=] 这样所有使用构造函数创建的对象都可以继承它。

function Counter() {
  this.num = 0;
};

Counter.prototype.timer = function() {
  this.timer = console.log('hey');
}

let obj = new Counter();

obj.timer();

了解 Javascript 函数中属性的执行

Understanding execution of properties in Javascript funciton

javascript

ecmascript-5