js中的new操作符解析
new 操作符做了以下事情:
1.创建一个对象,将对象赋值给this
function Person(name, age) {
console.log(this) //Person {}
}
let p = new Person('cj', 24)
2.执行构造函数的代码,将构造器中的this.prop属性添加到this上
function Person(name, age) {
console.log(this) //Person {}
this.name = name
this.age = age
console.log(this) //Person {name: 'cj', age: 24}
}
let p = new Person ('cj', 24)
3.为this对象设置原型为其f.prototype 设置构造函数的constructor指向构造函数本身
function Person(name, age) {
this.name = name
this.age = age
Object.setPrototypeOf(this, String.prototype) //相当于this.__proto__ = String.prototype
Person.prototype.constructor = Person //这个熟悉可以用于分辨类型,现在常用instanceof 来鉴别原型
return this //可有可无,隐式返回
}
let p = new Person('cj', 24) //由Person类型变成了String类型
console.log(p instanceof String) //true
console.log(p) //String {name: 'cj', age: 24}
4.隐式return this
先证明new 调用函数最终操作返回的时候函数的返回值
function Person(name, age) {
this.name = name
this.age = age
return {} //可有可无,隐式返回,这里若是返回基本类型、系统会返回this对象 可以试试 return null
}
let p = new Person('cj', 24)
console.log(p) //{} 证明new操作符对函数操作是返回其函数返回值
完整的new模拟实现
function Person(name, age) {
this.name = name
this.age = age
}
function _new(f) {
return function (...agrs) { //利用闭包分离构造函数和参数
let obj = {} //创建新对象
Object.setPrototypeOf(obj, f.prototype)// 等同于obj.__proto__ = f.prototype 赋予新对象原型
f.prototype.constructor = f //将构造器原型的constructor设置为构造器本身
let result = f.apply(obj, args) //将参数赋值到新对象
return result === 'object' ? result : obj //如果调用的构造函数有引用类型的返回值则返回其返回值,否则返回新对象
}
}
let p = _new(Person)('cj', 24)
console.log(p) //Person {name: 'cj', age: 24}
js中的new操作符解析的更多相关文章
- [JavaScript] JS中对Base64的解析
JS中对Base64的解析 <script type="text/javascript"> /** * UTF16和UTF8转换对照表 * U+00000000 – U ...
- js中的new操作符与Object.create()的作用与区别
js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...
- JS中的一元操作符
表达式 一元操作符 优先级 结合性 运算顺序 表达式是什么? 就是JS 中的一个短语,解释器遇到这个短语以后会把对它进行计算,得到一个结果参与运算,我们把这种要参与到运算中的各种各样的短语称为表达式. ...
- JS中的new操作符
在JS中定义一个构造函数,然后用new操作符构造对象obj,JS代码如下. function Base(){ this.name = "swf"; this.age =20; } ...
- js中的prototype原型解析
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- js中State模式的解析及运用
状态模式,在大的范畴中的定义为当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.每种编程语言有不同的实现方式,运用的范围也多用于游戏之中. 这里我用javascript来模拟状 ...
- JS中的闭包 详细解析大全(面试避必考题)
JS中闭包的介绍 闭包的概念 闭包就是能够读取其他函数内部变量的函数. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变 ...
- JS中的new操作符原理解析
var Person = function(name){ this.name = name; } Person.prototype.sayHello = function() { console.lo ...
- JS中的 new 操作符简单理解
首先上一一个简单的 new 操作符实例 var Person = function(name){ this.name = name; this.say = function(){ return &qu ...
随机推荐
- Java并发之原子性,可见性,有序性
原子性 原子性指的是一个或者多个操作在 CPU 执行的过程中不被中断的特性 在多线程情况下,线程会被操作系统调度进行任务切换,占有CPU时间片段的就执行,否则就阻塞 java中对基础类型的变量赋值是 ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- W tensorflow/core/util/ctc/ctc_loss_calculator.cc:144] No valid path found 或 loss:inf的解决方案
基于Tensorflow和Keras实现端到端的不定长中文字符检测和识别(文本检测:CTPN,文本识别:DenseNet + CTC),在使用自己的数据训练这个模型的过程中,出现如下错误,由于问题已经 ...
- Java并发专栏(一)—— Process vs Thread
一.前言 程序是代码和数据的集合,是一种静态实体.不具有代码执行和数据处理的能力,更多是一种行为的描述. 如果将程序和处理器结合,处理器将程序加载至内存,然后执行程序代码处理数据.这时就是可执行的程序 ...
- 《 .NET并发编程实战》阅读指南 - 第14章
先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.
- 将本地代码提交到github上
首先点击new,创建一个github仓库. 设置仓库名称. 这时候你需要创建一个ssh密匙,桌面右键Git Bash Here.敲入命令.cd ~/.ssh/,如果提示"no such&qu ...
- EF core的原生SQL查询以及用EF core进行分页查询遇到的问题
在用.net core进行数据库访问,需要处理一些比较复杂的查询,就不得不用原生的SQL查询了,然而EF Core 和EF6 的原生sql查询存在很大的差异. 在EF6中我们用SqlQuery和Exe ...
- Git 版本及版本范围表示法
很多 Git 命令都使用 revision(修订版本)作为参数.根据不同的命令,有时候 revision 参 数代表一个特定的提交,有时候代表某一个提交可以追踪到的所有的父提交(比如 git log) ...
- virtualbox通过Nat模式上网,宿主机与宿主机互通
本地搭建virtualbox,开始用的nat转发模式,这样的话宿主机没法访问虚拟机里面的服务.比如nginx网站.这样很不方便 . 在网上找了好久,终于找到了方案.那就是再添加一块虚拟网卡. 在虚拟机 ...
- 2019 浩德钢圈java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.浩德钢圈等公司offer,岗位是Java后端开发,因为发展原因最终选择去了浩德钢圈,入职一年时间了,也成为了面 ...