JavaScript-Algorithms icon indicating copy to clipboard operation
JavaScript-Algorithms copied to clipboard

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

Open sisterAn opened this issue 3 years ago • 6 comments

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

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(); //

sisterAn avatar Mar 14 '21 23:03 sisterAn

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

boyan1010 avatar Mar 15 '21 01:03 boyan1010

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

第一段代码

  • 答案:2、4、1、1、2、3

第二段代码

  • 答案:2、4、1、1、2、1

yancongwen avatar Mar 15 '21 01:03 yancongwen

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

huangchucai avatar Mar 15 '21 06:03 huangchucai

  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 avatar Feb 15 '23 13:02 sogud

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

sogud avatar Feb 16 '23 02:02 sogud

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

sogud avatar Feb 16 '23 02:02 sogud