记Javascript一道题的理解
时间:2022-04-22
本文章向大家介绍记Javascript一道题的理解,主要内容包括代码如下:、getName()、Foo().getName()、getName()、new Foo.getName()、new Foo().getName()、new new Foo().getName()、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
代码如下:
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(); //2
getName(); //4
Foo().getName(); //1
getName(); //1
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有参。
- Codeforces 626G Raffles(贪心+线段树)
- window.opener.location 安全风险讨论
- Vijos P1497 立体图【模拟】
- Vijos P1127 级数求和【模拟】
- 新型漏洞:利用浏览器Cookie绕过HTTPS并窃取私人信息
- Vijos P1113 不高兴的津津【模拟】
- Linux下MySQL的彻底卸载和安装配置字符集
- Codeforces 626F Group Projects(滚动数组+差分dp)
- Vijos P1103 校门外的树【线段树,模拟】
- BZOJ 1061: [Noi2008]志愿者招募【单纯形裸题】
- SQL vs NoSQL:如何选择?
- 线性规划之单纯形法【超详解+图解】
- NodeJS 应用仓库钓鱼
- Codeforces 626D Jerry's Protest(暴力枚举+概率)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue3 的响应式和以前有什么区别,Proxy 无敌?
- 腾讯云TKE-PV使用cos存储案例: 容器目录权限问题
- Vue3 究竟好在哪里?(和 React Hook 的详细对比)
- 前端「N皇后」递归回溯经典问题图解
- 深入 TypeScript 中的子类型、逆变、协变,进阶 Vue3 源码前必须搞懂的。
- Vue3 + TypeScript 实现递归菜单组件
- TypeScript 4.1 新特性:字符串模板类型,Vuex 终于有救了?
- TS 4.1 新特性实现 Vuex 无限层级命名空间的 dispatch 类型推断。
- egg.js踩坑记录(一)开始篇
- VUI创建日志(二)——防抖节流组件的实现
- 为你的VuePress博客添加GitTalk评论
- Go 中 Set 的实现方式
- Go 译文之词法分析与解析 Part Three
- React-Native踩坑记
- 【译】成为优秀程序员(和人类)的101个技巧