function Foo(){}  
Foo();
let f=new Foo();

function Foo(){
  console.log(this===window);
}  
Foo();

function Foo(){
  this.webName="蚂蚁部落";
}  
let f=new Foo();
console.log(f.webName);

在You don’t know JS系列丛书(特别是“this& Object Prototypes”标题)以及许多SO答案(例如this one)中,经常会发现没有“构造函数”这样的东西,而是通过调用的普通函数. “构造函数调用”.我试图通过创建vanilla函数来解决这一问题,这些函数并不是用new来调用来创建我的对象.

第一次尝试有效：

var assert = function(condition,message) {
    if (!condition)
        throw new Error(message||'assertion error');
};

var Counter1 = function() {
    var count = 0;
    return {get: function() {return count;},inc: function() {count++;}};
};

var c2a = Counter1();
c2a.inc();
assert(c2a.get()===1);
var c2b = Counter1();
assert(c2b.get()===0);
assert(c2a.get()===1); // prevIoUs counter is a separate object

现在我试图通过不每次重新创建getter / setter函数来改进上面的代码,而只是简单地将它们分配给原型(这里我失败了)：

var Counter2 = function Counter2_() {
    var count = 0;
    Counter2_.prototype.get = function() {return count;};
    Counter2_.prototype.inc = function() {count++;};
    assert(Counter2_.prototype.constructor === Counter2_);
    var rv = {};
    rv.__proto__ = Counter2_.prototype;
    return rv;
};

var c = Counter2();

c.inc();
assert(c.get()===1);
assert(Object.getPrototypeOf(c)===Counter2.prototype);

var cb = Counter2();
assert(Object.getPrototypeOf(cb)===Counter2.prototype);
assert(cb.get()===0);
assert(c .get()===1,'expecting c to be 1 but was:'+c.get());

上面的代码在最后一行失败了.
我的理解是上面的代码没有成功维护单独的计数器,因为每次调用Counter2函数时,先前对象的原型get被设置为新创建的函数,该函数在词法上绑定到新计数(再次初始化为0).此外,代码是愚蠢的,因为每次调用Counter2函数时都会再次创建函数,并在原型上反复重新分配(带来的灾难性结果是无法维护单独的计数器).

然而,尝试将分配放置在Counter2函数之外的原型也会失败,因为count变量不再在范围内：

var Counter3 = function Counter3_() {
    var count = 0;
    var rv = {};
    rv.__proto__ = Counter3_.prototype;
    return rv;
};

Counter3.prototype.get = function() {return count;}; // this fails - I no longer have access to count's lexical scope
Counter3.prototype.get = function() {return this.count;}; // this fails too

我的问题是：

1)我的解读为什么Counter2无法保持单独的计数器正确？

2)有没有办法使用这个习惯用法(即使用不想用new调用的“vanilla”函数),并且每次调用函数时都避免重新创建getter / setter？

function Counter2(name) {
    var count = 0;

    Counter2.prototype.get = function() {return count;};
    Counter2.prototype.inc = function() {count++;};

    var rv = {};
    if(name) {
        rv.get = function() {console.log(name); return count;};
    }
    console.log(count)
    rv.__proto__ = Counter2.prototype;
    return rv;
}

var a = Counter2('a');
var b = Counter2('b');
var c = Counter2();

在下面的示例中,a和b不继承get函数,因为它们的get键未定义并指向不同的函数实例.请记住,如果传入一个名称,并且每次猜到以下输出将被重新定义时,计数变量仍然会被分配和唯一绑定.

a.inc();a.inc();
[a.get(),b.get(),c.get()]

是：

  [0,2]

2)是和否.您可以轻松返回具有每次都不会分配的函数的对象,但如果绑定了变量,它们将在它们之间共享.奇怪的是,通过使用原型继承和新的运算符,这可以很容易地完成.

例如,以下代码不会每次都分配新函数,但a.inc()将增加b的值,如果调用则增加其他值.

var count = 0;

function inc() {++count;}
function get() {return count;}

function Count() {
    return {inc: inc,get: get};
};

var a = Count();
var b = Count();

通过使用new运算符,可以实现唯一绑定的“变量”,而无需每次都分配新函数.

function Count(){}
    Count.prototype.count = 0;
    Count.prototype.get = function() {return this.count;};
    Count.prototype.inc = function() {this.count++;};

var a = new Count();
var b = new Count();
a.inc();
a.get();
>>1
b.get();
>>0
a.inc === b.inc
>>true

function animal() {}
var frog = new animal();
animal.prototype.color = 'Green';
console.log(frog.color);
// 'Green'

但是如果我在new关键字之后使用obj.prototype = {key：val},它会给我一个未定义的代码,如

function animal() {}
var frog = new animal();
animal.prototype = {
    color: 'Green'
};
console.log(frog.color);
// 'undefined' -- why?

如果我在新关键字之前更改了原型的顺序,它会没问题,这很奇怪,为什么？因为我们知道对象的原型允许我们向该对象的所有实例添加属性(甚至是现有实例),对吧？

代码就像

function animal() {}
animal.prototype = {
    color: 'Green'
};
var frog = new animal();
console.log(frog.color);
// 'Green'

function animal() {}
var frog = new animal();

console.log(Object.getPrototypeOf(frog) === animal.prototype);
# true

animal.prototype = {
    color: 'Green'
};

console.log(Object.getPrototypeOf(frog) === animal.prototype);
# false

console.log(frog.color);

在第一个console.log中,它打印为true,因为new已将动物的原型对象设置为frog的内部[[Prototype]]对象.但是,当你为动物的原型分配一些其他对象时,青蛙的内部[[Prototype]]对象仍然引用旧对象,它没有颜色属性.这就是它打印未定义的原因.

当您更改顺序时,遇到新语句时,它会获取动物的原型对象(您指定的新对象),并创建青蛙对象.这就是为什么它具有颜色属性.

现在,您可能想知道为什么第一个案例工作正常.因为,

animal.prototype.color = 'Green';

不会将animal.prototype替换为其他一些对象,但它会变异(或增加,如果您愿意的话)animal.prototype对象.因此,frog的内部[[Prototype]]属性仍然与animal.prototype对象相同.