分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

js中的new操作符解析

发布时间:2023-09-06 02:30责任编辑:白小东关键词:js

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) //trueconsole.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操作符解析

原文地址:https://www.cnblogs.com/sefaultment/p/10290069.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved