前言
对于方法执行的顺序, 讲真在面试时遇到这题目一开始挺开心的, 毕竟自己也大概了解, 但是这题考察的并不是一个知识点那么简单, 再加上在原型的问题上绕来绕去地可以说十分磨心态的.
直接上题:
- function Number() {
- getNumber=function () {
- console.log(0)
- }
- return this;
- }
- Number.getNumber=function () {
- console.log(1)
- }
- Number.prototype.getNumber=function () {
- console.log(2)
- }
- var getNumber=function () {
- console.log(3)
- }
- function getNumber() {
- console.log(4)
- }
- Number.getNumber();// 静态方法
- getNumber();// 普通函数
- Number().getNumber();// 执行 Number() 后执行内部函数
- getNumber();// 普通函数
- new Number.getNumber();// 静态方法的实例
- new Number().getNumber();// 实例对象的方法
- new new Number().getNumber();
正确的答案:
- 1
- 3
- 0
- 0
- 1
- 2
- 2
第一个 Number.getNumber() 静态方法, 没有任何争议;
第二个 getNumber(), 则涉及到函数执行的预编译问题, 在预编译中执行:
如果遇到执行的是 function, 则会先以查找原型链的方式查找到方法, 并执行; 但如果想题目这种有 function 和函数表达式 var,let,const 等, 则会先执行 function 的方法, 即上面所说的查找原型链, 因此这里先执行了
- function getNumber() {
- console.log(4)
- }
而后执行
- var getNumber=function () {
- console.log(3)
- }
那么, 预编译完成后则先执行的 function 被函数表达式覆盖, 而执行的是函数表达式的方法 -- 第一坑
第三个式子 Number().getNumber(), 当执行 Number() 后返回了 this, 此时指向的是 Windows, 则这是相对于执行了 this.getNumber(), 而内部函数关系式的上下文为 Windows, 所以执行内部函数
第四个式子还是执行内部函数, 如果看到这还不明白, 可以试着把第三个式子拆分为 Number() 和 getNumber() 再 F12 调试看 this, 你就明白了 -- 第二坑
第五个式子 new 了静态函数, 即调用了静态函数
第六个, 第七个式子都是实例对象的成员方法
以上均是本人通过个人理解与查阅资料而来, 如果有错误的地方请指出, 谢谢!!
另外觉得文章写得不错的话可以点赞并关注我哦~
来源: http://www.jianshu.com/p/c6fb11fc44ef