函数执行

2022-04-14  本文已影响0人  泪滴在琴上
function Foo() {
  getName = function () {
    console.log(1);
  };
  return this;
}

Foo.getName = function () {
  console.log(2);
}

Foo.prototype.getName = function () {
  console.log(3);
}

var getName = function () { 
  console.log(4);
}

function getName() {
  console.log(5)
}

Foo.getName();

getName();

Foo().getName()

getName();

new Foo.getName(); 

new Foo().getName()

new new Foo().getName()

这道题其实就是看你对作用域的关系的理解吧
执行结果:

执行 Foo.getName(), 执行Foo函数对象上的的静态方法。打印出 2

执行 getName(), 就是执行的getName变量的函数。打印 4

为什么这里是 执行的 变量getName,而不是函数getName呢。这得归功于js的预编译
js在执行之前进行预编译,会进行 函数提升 和 变量提升
所以函数和变量都进行提升了,但是函数声明的优先级最高,会被提升至当前作用域最顶端
当在执行到后面的时候会导致getName被重新赋值,就会把执行结果为 4 的这个函数赋值给变量

执行 Foo().getName(), 调用Foo执行后返回值上的getName方法。 Foo函数执行了,里面会给外面的getName函数重新赋值,并返回了this。 也就是执行了this.getName。所以打印出了 1

执行 getName(), 由于上一步,函数被重新赋值。所以这次的结果和上次的结果是一样的,还是为1

执行 new Foo.getName(), 这个 new 其实就是new了Foo上面的静态方法getName 所以是2。 当然如果你们在这个函数里面打印this的话,会发现指向的是一个新对象 也就是new出来的一个新对象

可以把 Foo.getName()看成一个整体,因为这里 . 的优先级比 new 高

执行 new Foo().getName(),这里函数执行 new Foo() 会返回一个对象,然后调用这个对象原型上的getName方法, 所以结果是 3

执行 new new Foo().getName(), 这个和上一次的结果是一样,上一个函数调用后并咩有返回值,所以在进行new的时候也没有意义了。 最终结果也是3

作者:Ali2333
链接:https://juejin.cn/post/7079681931662589960
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

上一篇 下一篇

猜你喜欢

热点阅读