代码如下:

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(); //2 => new (Foo.getName)() new无参数列表
new Foo().getName(); // 3 => (new Foo()).getName(); //new有参数列表
new new Foo().getName(); //3 => new ((new Foo()).getName)() //new有参数列表

Foo.getName()

输出结果为:2
原理:他调用的是Foo的静态方法(如果C#、java等后端语言来说),其实是因为Javascript中的Function本身就是Function和Object的结合,所以function既是函数,也是对象。在这里Foo就是执行了他对象上的一个function而已。

getName()

输出结果为:4
原理:可能你会想为什么不是5,function变量会提升到作用域的顶部,而var定义的则不会,所以var声明的覆盖掉function声明。所以结果为4

Foo().getName()

输出结果为:1
原理:Foo()是函数调用,Foo执行体中对getName进行了重新赋值(全局的getName,根据作用域链向上查找),返回的this为window(Foo执行时没有调用,默认为全局),然后.getName()调用了全局的getName(也就是被Foo执行体重写的getName),所以结果为:1

getName()

输出结果为:1 原理:因为Foo执行体中对全局getName重写了,这时调用的又是全局的getName。所以结果为:1

new Foo.getName()

输出结果为:2
原理:

  • 由于new无参,与new有参的运算优化级一样。new有参的与.运算符同一级别,而new无参的低一个级别。所以会先执行.运算符选择到Foo的静态方法getName
  • 然后执行new,获得的是Foo.getName的一个实例。所以输出结果为:2

new Foo().getName()

输出结果为:3

原理:

  • 由于new是有参的,与.运算符同级,按照从左向右的执行顺序,先执行new Foo()。
  • new Foo()是需要值得我们的注意,因为他有一个返回值。存在返回值分为两种情况:
    • 无返回与返回为基本类型是一样的效果:返回都是实例对象(也就是当前的this)
    • 返回为引用类型:返回的为这个引用类型的对象,此时实例对象被替换了(也就是当前的this没有返回)。因数new Foo()返回是实例对象
  • .getName():选择是上一步实例的此方法,所以输出结果为:3

new new Foo().getName()

输出结果为:3
原理:主要是运算符优先级的考查,实例开发中应该不会这样直接的用到。首先new有参,然后.getName(.运算符)(为什么是.运算符,这是因为new无参级别低一个档次),再则new有参。

记Javascript一道题的理解的更多相关文章

  1. 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解

    1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...

  2. 03.JavaScript 面向对象精要--理解对象

    JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...

  3. JavaScript可否多线程? 深入理解JavaScript定时机制(转载)

    说明:最近写 js 时需要用setinterval函数做定时操作,谁知道,刚开始后运行完好,但一段时间后他就抽风了,定时任务运行的时间间隔越来越短,频率加快,这是一个完全不能容忍的问题,带着一个可以出 ...

  4. JavaScript中的闭包理解

    原创文章,转载请注明:JavaScript中的闭包理解  By Lucio.Yang 1.JavaScript闭包 在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第 ...

  5. JavaScript闭包的一些理解

    原文:JavaScript闭包的一些理解 简单一点的说:闭包就是能够读取其他函数内部变量的函数.那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那 ...

  6. 对JavaScript中闭包的理解

    在前端开发中闭包是一个很重要的知识点,是面试中一定会被问到的内容.之前我对闭包的理解主要是"通过闭包可以在函数外部能访问到函数内部的变量",对闭包运用的也很少,甚至自己写过闭包自己 ...

  7. javascript中 (function(){})();如何理解?

    javascript中 (function(){})();如何理解? javascript中: (function(){})()是匿名函数,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环 ...

  8. 转:对JavaScript中闭包的理解

    关于 const     let      var  总结: 建议使用 let  ,而不使用var,如果要声明常量,则用const. ES6(ES2015)出现之前,JavaScript中声明变量只有 ...

  9. javascript 匿名函数的理解(转)

    原网址 http://www.jb51.net/article/21948.htm javascript 匿名函数的理解(透彻版) 代码如下: (function(){ //这里忽略jQuery所有实 ...

随机推荐

  1. 问题解决:Spyder不支持OpenCV模块代码提示

    在使用中遇到的问题是,Spyder的代码完成功能不支持某些编译模块(.pyd后缀),如OpenCV的Python模块cv/cv2,在编写脚本文件时,在已存在import cv&import c ...

  2. 837B. Balanced Substring

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  3. flume安装

    1.flume安装 将压缩包减压到当前目录 tar -zxf apache-flume-1.8.0-bin.tar.gz 配置环境变量  编辑当前目录中的  .bashrc  文件(这影响当前用户的环 ...

  4. 让MEF插上AOP的翅膀

    什么是MEF Git:https://github.com/MicrosoftArchive/mef MEF也是一款ioc框架,貌似历史比较悠久了. 这里有一篇.net阵容里面主流ioc比较. htt ...

  5. R语言之Apriori算法

    ---恢复内容开始--- 1.概念 关联分析:用于发现隐藏在大型数据集中的有意义的联系 项集:0或多个项的集合.例如:{啤酒,尿布,牛奶,花生} 是一个4-项集,意义想象成爸爸去超市买啤酒和花生,给儿 ...

  6. ndk编译libx264生成库

    编译脚本如下: TOOLCHAIN=$NDK/toolchains/arm-linux-androideabi-4.6/prebuilt/linux-x86_64 function build_x26 ...

  7. ASP.NET Core知多少(6):VS Code联调Angular + .NetCore

    ASP.NET Core知多少系列:总体介绍及目录 1. 引言 最近在看<程序员的成长课>,讲到程序员如何构建技能树,印象深刻.作为一名后台开发的程序员,深感技能单一,就别说技能树了.作为 ...

  8. 算法与数据结构(十一) 平衡二叉树(AVL树)(Swift版)

    今天的博客是在上一篇博客的基础上进行的延伸.上一篇博客我们主要聊了二叉排序树,详情请戳<二叉排序树的查找.插入与删除>.本篇博客我们就在二叉排序树的基础上来聊聊平衡二叉树,也叫AVL树,A ...

  9. Servlet, Struts2和SpringMVC 并发访问线程安全问题

    第一部分: Servlet不是线程安全的. 要解释Servlet为什么不是线程安全的,需要了解Servlet容器(即Tomcat)使如何响应HTTP请求的. 当Tomcat接收到Client的HTTP ...

  10. Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...