第 100 题：请写出如下代码的打印结果 #155

yygmind · 2019-07-07T13:52:48Z

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
Foo.prototype.a = function() {
    console.log(3)
}
Foo.a = function() {
    console.log(4)
}
Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

huiliangShen · 2019-07-08T01:00:08Z

结果如下

4
2
1

noctiomg · 2019-07-08T01:01:21Z

输出顺序是 4 2 1 .

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
// 以上只是 Foo 的构建方法，没有产生实例，此刻也没有执行

Foo.prototype.a = function() {
    console.log(3)
}
// 现在在 Foo 上挂载了原型方法 a ，方法输出值为 3

Foo.a = function() {
    console.log(4)
}
// 现在在 Foo 上挂载了直接方法 a ，输出值为 4

Foo.a();
// 立刻执行了 Foo 上的 a 方法，也就是刚刚定义的，所以
// # 输出 4

let obj = new Foo();
/* 这里调用了 Foo 的构建方法。Foo 的构建方法主要做了两件事：
1. 将全局的 Foo 上的直接方法 a 替换为一个输出 1 的方法。
2. 在新对象上挂载直接方法 a ，输出值为 2。
*/

obj.a();
// 因为有直接方法 a ，不需要去访问原型链，所以使用的是构建方法里所定义的 this.a，
// # 输出 2

Foo.a();
// 构建方法里已经替换了全局 Foo 上的 a 方法，所以
// # 输出 1

mcDullLi · 2019-07-08T01:21:11Z

4 2 1

mandyshen97 · 2019-07-08T01:44:01Z

4 2 1

superermiao · 2019-07-08T01:45:04Z

4
2
1

Rainy934 · 2019-07-08T01:47:22Z

421

考察的应该是原型和函数的理解

taosin · 2019-07-08T01:48:06Z

4 2 1

webXLing · 2019-07-08T01:56:57Z

4 2 1

FISHzzj · 2019-07-08T02:21:54Z

输出顺序：4,2,1

dorseysen · 2019-07-08T02:34:22Z

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
Foo.prototype.a = function() {
    console.log(3)
}
Foo.a = function() {
    console.log(4)
}
Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

答案：

4、2、1

Foo.a() 第一个为4没有什么异议
new 的时候会将函数的主函数执行一遍，并将原型挂载至新的函数上，此时obj有本身来自Foo的this.a，也有原型上的prototype.a，查找obj.a时，在函数本域上有this.a，则直接输出来自于Foo的this.a，也就是console.log(2)。接下来的Foo.a，这时候Foo函数内部由于同样有Foo.a = function ...，new的时候Foo.a的值相当于被重置了，则输出1。

TNTrocket · 2019-07-08T04:15:35Z

4，2，1

liangchaofei · 2019-07-09T01:37:01Z

4,2,1

james9527 · 2019-07-09T02:00:36Z

function Foo() {
    Foo.a = function() {
      console.log(1)
    }
    this.a = function() {
      console.log(2)
    }
}
// 实例方法
Foo.prototype.a = function() {
   console.log(3)
}
// 静态方法
Foo.a = function() {
   console.log(4)
}
Foo.a(); // 4  直接调Foo静态方法a
let obj = new Foo();
obj.a(); // 2  因是obj调用，故优先调用构造函数Foo自身的方法a，如果自身没有则执行原型链上的方法a
Foo.a(); // 1  因执行了一次new 操作，故再次调用Foo.a()时调用了Foo函数体内的静态方法a

rongda · 2019-07-09T02:01:37Z

function Foo() { // 构造函数Foo
  Foo.a = function() {
    console.log(1)
  }
  this.a = function() {
    console.log(2)
  }
}
Foo.prototype.a = function() { // 原型上也有个a属性
  console.log(3)
}
Foo.a = function() { // 未new时，给函数对象添加a方法
  console.log(4)
}
Foo.a();  // 很自然这里打印的是 4 
let obj = new Foo(); // 实例化一个obj对象 ，执行了一次Foo函数
// 原型链
obj.__proto__ === Foo.prototype
Foo.prototype.__proto__ === Object.prototype
Object.prototype === null
obj.a(); // 2
Foo.a(); // 1

Weathers0086 · 2019-07-09T02:43:25Z

Saitmob · 2019-07-09T04:21:15Z

那些只说结果不去分析的，有啥意义。。

Dandelion86 · 2019-07-09T12:07:04Z

// 定义一个构造函数Foo
function Foo() {
Foo.a = function() {
console.log(1)
}
this.a = function() {
console.log(2)
}
}
// 给构造函数Foo的原型对象上添加属性a
Foo.prototype.a = function() {
console.log(3)
}
// 函数也是对象，给Foo函数添加属性a
Foo.a = function() {
console.log(4)
}
// 访问Foo函数上的属性a执行，输出 4
Foo.a();
// 实例化出对象obj,在new的过程中，给Foo上的a重新赋值，实例化出的obj对象也有一个a
let obj = new Foo();
// 输出 2
obj.a();
// 输出1
Foo.a();

wingmeng · 2019-07-10T00:26:10Z

答案为：4, 2, 1
解析：

Foo.a() 这个是调用 Foo 函数的静态方法 a，虽然 Foo 中有优先级更高的属性方法 a，但 Foo 此时没有被调用，所以此时输出 Foo 的静态方法 a 的结果：4
let obj = new Foo(); 使用了 new 方法调用了函数，返回了函数实例对象，此时 Foo 函数内部的属性方法初始化，原型方法建立。
obj.a(); 调用 obj 实例上的方法 a，该实例上目前有两个 a 方法：一个是内部属性方法，另一个是原型方法。当这两者重名时，前者的优先级更高，会覆盖后者，所以输出：2
Foo.a(); 根据第2步可知 Foo 函数内部的属性方法已初始化，覆盖了同名的静态方法，所以输出：1

Renser804 · 2019-07-10T06:04:27Z

421

abshawn · 2019-07-10T07:27:01Z

421

NaturelLee · 2019-07-12T02:04:03Z

// 构造函数Foo
function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
// 在构造函数Foo的原型上添加a方法
Foo.prototype.a = function() {
    console.log(3)
}
// 在构造函数Foo上添加a方法
Foo.a = function() {
    console.log(4)
}
// 直接调用Foo.a()方法
Foo.a();
// 实例化, 会执行构造函数
// 实例化所在事情：在Foo上添加a方法，在新建实例上添加a方法，在Foo的原型上添加a方法
let obj = new Foo();
//执行Foo的实例obj的方法a
obj.a();
// 执行Foo的方法a
Foo.a();

MissNanLan · 2019-07-13T08:51:26Z

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
Foo.prototype.a = function() {
    console.log(3)
}
Foo.a = function() {
    console.log(4)
}
Foo.a(); // 调用构造函数的自身的方法 ，所以结果是4
let obj = new Foo(); // new重新创建一个obj，使它指向Foo，拥有了构造函数的属性和方法
obj.a();  //  因为构造函数有直接方法，所以输出2
Foo.a();  // 构造函数重新全局a方法，所以结果结果是1，之前是4

// 结果是4、2、1

dizangwang · 2019-07-15T01:11:05Z

// 构造函数Foo
function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
// 在构造函数Foo的原型上添加a方法
Foo.prototype.a = function() {
    console.log(3)
}
// 在构造函数Foo上添加a方法
Foo.a = function() {
    console.log(4)
}
// 直接调用Foo.a()方法
Foo.a();
// 实例化, 会执行构造函数
// 实例化所在事情：在Foo上添加a方法，在新建实例上添加a方法，在Foo的原型上添加a方法
let obj = new Foo();
//执行Foo的实例obj的方法a
obj.a();
// 执行Foo的方法a  （Foo经过上一步实例化之后，重新绑定了a方法）
Foo.a();

Yxiuchao · 2019-07-15T07:31:17Z

4
2
1

kukudeshiyi · 2019-07-16T15:00:38Z

这个我会，来声个张,

IAMSBLOL · 2019-07-18T01:51:41Z

421~
声明顺序：
Foo.a = function() { console.log(4) }
所以第一个为4，

接下来new了一下构造函数~
虽然把原型链挂到了新obj，
但是，构造函数重定义了Foo.a，且设定构造函数的娃的a为2。

kunogi · 2019-07-21T04:47:28Z

2楼的解完美
补一句，
function Foo() { Foo.a = function() { console.log(1) } //this.a = function() {//干掉这里让prototype上a，console出3可以生效的方法 //console.log(2) //} } Foo.prototype.a = function() { console.log(3) } Foo.a = function() { console.log(4) } Foo.a(); let obj = new Foo(); obj.a(); Foo.a();

MissJingRongLi · 2019-08-03T04:00:21Z

`Foo.a(); // 4 全局的Foo.a

let obj = new Foo(); // 执行Foo的构造函数，将最后的 Foo.a（全局）覆盖

obj.a(); // 2 this.a

Foo.a(); // 1 Foo构造函数里的 foo.a 因为全局的已经被覆盖
`

skychenbo · 2019-12-30T06:46:24Z

京东怎么总喜欢出这种乱七八糟的题

awesomezao · 2020-03-04T07:00:56Z

421
大家回答挺好的,考察的是原型链和实例的问题

 function Foo() {
   Foo.a = function() {
     console.log(1);
   };
   this.a = function() {
     console.log(2);
   };
}
 
// 原型方法,在生成实例时使用
 Foo.prototype.a = function() {
   console.log(3);
};
 
// 静态方法,可以直接调用
 Foo.a = function() {
   console.log(4);
};
 
 Foo.a(); // 实例没有生成,直接调用静态方法,输出4
 let obj = new Foo();
 obj.a(); // 实例中有a,不去原型链中查找,之前在Foo.prototype.a的函数也被覆盖,输出2
 Foo.a(); // 生成实例后,Foo原型链中的静态方法被覆盖,输出1

heightzhang · 2020-03-26T14:11:18Z

这道题很好的讲述了构造函数中，new做的事情：
（1）创建一个新对象；
（2）将构造函数的作用域赋给新对象（因此this就指向了这个对象）；所以，obj.a()输出2
（3）执行构造函数中的代码（为这个新对象添加属性）; 所以Foo.a()输出1，因为被覆盖了
（4）返回新对象。

lunhui1994 · 2020-05-03T06:24:12Z

function Foo() { Foo.a = function() { console.log(1) } this.a = function() { console.log(2) } }
该步骤是函数声明，函数声明会被编译器优先进行提升，并且在全局(此题为全局)词法作用域中声明了叫Foo的标识符。

Foo.prototype.a = function() { console.log(3) }
在函数原型上添加了一个a函数
Foo.a = function() { console.log(4) }

在Foo上添加了一个a函数，js中万物皆函数，所以就相当于在Foo这个对象上添加了一个新的属性a，并赋值为一个函数。要注意的是，这并不会对Foo构造（new）出来的对象造成影响。

Foo.a() 执行了上面定义的函数 console.log(4)

let obj = new Foo();

new 相当于创建一个新对象，用Foo对其进行构造，题目中Foo中对obj有影响的只有this.a = ...

obj的__proto__也会指向其构造函数Foo的原型Foo.prototype

所以当obj中查找的属性不存在时，顺着__proto__到Foo.prototype中去找，还找不到就去Object.prototype中找。

同样Foo()，说明Foo被执行了一次。
在Foo中
”Foo.a = function() {
console.log(1)
}“
这段代码首先会在Foo的作用域中寻找是否存在Foo这个标识符，若存在，会将其属性a定义。若不存在，会查找父作用域中是否存在。所以Foo.其实改的是父作用域的Foo，因为函数内部不存在这个值的。
所以这段代码，在本题目中，其实写在哪都一样。

obj.a();

由于obj自身拥有a，所以会执行console.log(2)
Foo.a();

再此执行全局作用域中的Foo.a 因为Foo()执行了对Foo.a的修改，所以console.log(1)`

arixse · 2020-05-04T15:00:10Z

思路：

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
Foo.prototype.a = function() {
    console.log(3)
}
Foo.a = function() {
    console.log(4)
}
Foo.a();   //由于Foo未初始化，所有不会执行构造函数中代码，所有调用的是外面的Foo.a，输出4
let obj = new Foo();   // 执行构造函数，`this.a`被执行
obj.a(); // 由于在Foo构造函数中存在`this.a`，所以此时不会向上查找原型链上的a函数，执行`this.a`中代码
Foo.a();  // 构造函数被执行，Foo.a被新的代码覆盖，此时Foo.a为构造函数内部的赋值，输出1

结果：4，2，1

chillerxx · 2020-11-08T09:26:49Z

100题达成前面又忘了(bushi）。。。

xlb233 · 2021-03-09T03:31:19Z

打印顺序 4 2 1

function Foo() {

    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
// 给Foo类的实例的原型增加名为a的属性，打印3
Foo.prototype.a = function() {
    console.log(3)
}
// 给Foo对象增加一个名为a的属性，打印4
Foo.a = function() {
    console.log(4)
}
// 调用Foo对象的a方法，输出4
Foo.a();
// 实例化Foo类为obj对象，此时Foo构造函数被调用
// Foo对象的a属性被替换为打印1的函数
// 实例方法a被赋值为一个打印2的函数
let obj = new Foo();
obj.a(); // 2
Foo.a(); //1

752337625 · 2021-03-14T10:27:58Z

yygmind mentioned this issue Jul 14, 2019

前端 100 问：能搞懂80%的请把简历给我 yygmind/blog#43

Open

yygmind added the JS基础 label Dec 16, 2019

yaofly2012 mentioned this issue Feb 13, 2020

JS-函数 yaofly2012/note#99

Open

第 100 题：请写出如下代码的打印结果 #155

第 100 题：请写出如下代码的打印结果 #155

Comments

yygmind commented Jul 7, 2019

huiliangShen commented Jul 8, 2019

noctiomg commented Jul 8, 2019

mcDullLi commented Jul 8, 2019

mandyshen97 commented Jul 8, 2019

superermiao commented Jul 8, 2019

Rainy934 commented Jul 8, 2019

taosin commented Jul 8, 2019

webXLing commented Jul 8, 2019

FISHzzj commented Jul 8, 2019

dorseysen commented Jul 8, 2019 • edited Loading

TNTrocket commented Jul 8, 2019

liangchaofei commented Jul 9, 2019

james9527 commented Jul 9, 2019 • edited Loading

rongda commented Jul 9, 2019

Weathers0086 commented Jul 9, 2019

Saitmob commented Jul 9, 2019

Dandelion86 commented Jul 9, 2019

wingmeng commented Jul 10, 2019

Renser804 commented Jul 10, 2019

abshawn commented Jul 10, 2019

NaturelLee commented Jul 12, 2019 • edited Loading

MissNanLan commented Jul 13, 2019

dizangwang commented Jul 15, 2019

Yxiuchao commented Jul 15, 2019

kukudeshiyi commented Jul 16, 2019

IAMSBLOL commented Jul 18, 2019

kunogi commented Jul 21, 2019

MissJingRongLi commented Aug 3, 2019

skychenbo commented Dec 30, 2019

awesomezao commented Mar 4, 2020

heightzhang commented Mar 26, 2020 • edited Loading

lunhui1994 commented May 3, 2020 • edited Loading

arixse commented May 4, 2020

chillerxx commented Nov 8, 2020

xlb233 commented Mar 9, 2021

752337625 commented Mar 14, 2021

dorseysen commented Jul 8, 2019 •

edited

Loading

james9527 commented Jul 9, 2019 •

edited

Loading

NaturelLee commented Jul 12, 2019 •

edited

Loading

heightzhang commented Mar 26, 2020 •

edited

Loading

lunhui1994 commented May 3, 2020 •

edited

Loading