sisterAn / JavaScript-Algorithms

基础理论+JS框架应用+实践,从0到1构建整个前端算法体系
5.48k stars 632 forks source link

做了一道题,回答了一下输出的内容 #159

Open sisterAn opened 3 years ago

sisterAn commented 3 years ago

做了一道题,回答了一下输出的内容

function Foo() {
  getName = function(){ alert(1); };
  return this;
}
Foo.getName = function() { alert(2); };
Foo.prototype.getName = function(){ alert(3); };
var getName = function() { alert(4); };
function getName(){ alert(5); };

Foo.getName(); //
getName(); //
Foo().getName(); //
getName(); //
new (Foo.getName)(); //
(new Foo()).getName(); //

然后改动了一个地方,继续问我输出结果是什么

function Foo() {
  // 这里加了一个this
  this.getName = function(){ alert(1); };
  return this;
}
Foo.getName = function() { alert(2); };
Foo.prototype.getName = function(){ alert(3); };
var getName = function() { alert(4); };
function getName(){ alert(5); };

Foo.getName(); //
getName(); //
Foo().getName(); //
getName(); //
new (Foo.getName)(); //
(new Foo()).getName(); //
boyan1010 commented 3 years ago

第一题:2-4-1-1-2-3 其他的没什么,4这里,卡了一下,忘了是变量提升 第二题:2-4-1-1-2-1

yancongwen commented 3 years ago

设计到的知识点有:变量提升、函数提升(函数声明和函数表达式)、原型和原型链、构造函数、this指向问题

第一段代码

第二段代码

huangchucai commented 3 years ago

2,4,1,1,2,3 2,4,1,1,2,1

sogud commented 1 year ago
  1. Foo.getName(); 输出 2,因为 getName 是 Foo 的一个静态方法,可以直接通过 Foo.getName() 调用,输出 2。

  2. getName(); 输出 4,因为函数声明会被函数表达式覆盖,所以此时 getName 已经被赋值为一个函数表达式。

  3. Foo().getName(); 首先执行 Foo(),把 getName 赋值给全局 getName,然后调用全局 getName(),输出 1。注意,这里的 Foo() 返回的是全局对象(浏览器中为 window),而不是 Foo 实例。

  4. getName() 的输出结果应该是1。这是因为在执行 Foo().getName() 之后,getName 变量被重新赋值为 alert(1),所以当再次调用 getName() 时,实际上是执行了 alert(1),而不是之前的 alert(4)。

  5. new Foo.getName(); 使用 new 调用一个函数表达式,相当于 new (Foo.getName)(),所以输出 2。

  6. (new Foo()).getName(); 实例化 Foo,并调用实例的 getName() 方法,输出 3。

sogud commented 1 year ago

第二段最后一个结果输出1是因为实例化Foo的时候有了this指向所以输出1,第一段代码因为this上不存在getName会向原型链上查找执行Foo.prototype.getName = function(){ alert(3); };

sogud commented 1 year ago

第二段最后一个结果输出1是因为实例化Foo的时候有了this指向所以输出1,第一段代码因为this上不存在getName会向原型链上查找执行Foo.prototype.getName = function(){ alert(3); };