js中new 到底做了瓦特??比较new、Object.create、Object.setPrototypeOf

2023-11-04

实例化的时候我们都是这样:

var box=new  BOX()

那么new在中间有什么作用呢,

  1. new 先创建一个新对象b=new Object();
  2. 将构造函数作用域赋给新变量 b.proto=BOX.prototype;
  3. 执行构造函数中的代码(属性,方法什么的),this指向b
  4. 如果BOX返回的是值类型,就直接返回b,若是引用类型,则不要b返回这个引用类型,这里开始不太懂,找到了一篇解释的比较到位的文章给大家分享biu~

模拟一个new的过程

function mynew(fn){
var o=new Object();
o.proto=fn.prototype;
var result=fn.call(o);
if(typeof result==‘object’) return result;
else return o;
}
// 测试
var parent=function(){
name=‘lorry’;
}
parent.prototype.say=function(){alert(this.name);};
var child=mynew(parent);
child.name=‘hh’
child.say();

function mynew(fn){
var o=new Object();
var args=arguments.slice(1);
o.proto=fn.prototype;
var result=fn.call(o,args);
if(typeof result==‘object’) return result;
else return o;
}
// 测试
var parent=function(para){
name=para;
}
parent.prototype.say=function(){alert(this.name);};
var child=mynew(parent,‘lorry’);
child.say();

贴一下我测试的代码

<body>
    <h3>new做了什么</h3>
    <ul>
        <li>1.创建一个空对象obj</li>
        <li>2.obj.__proto__=OBJ.prototype</li>
        <li>3.执行OBJ的constructor() ,属性,方法什么的,this指向的是obj</li>
        <li>4.如果OBJ返回一个对象,就直接返回这个对象</li>
        <li>5.如果不是,则返回obj</li>
    </ul>
    <h3>
        object.create(),
    </h3>
    <ul>
        <li>1.创建一个新对象</li>
        <li>2.把新对象的_proto_关联到指定对象的prototype</li>
    </ul>
    <h3>
        Object.setPrototypeOf(),
    </h3>
    <ul>
        <li>1.Object.setPrototypeOf(target.prototype,origin.prototype)</li>
    </ul>

</body>
<script>
    function Animal(){
        this.eat=function(){
            console.log('Animal eat');
        }
    }
    Animal.prototype.eats=function(){
        alert('Animal eats');
    }
    function Dog(){
        console.log('this',this);//===构造函数Dog {bark: ƒ}
        this.bark=function(){
            console.log('dog bark');
        }
    }
    Dog.prototype.wangwang=function(){
        alert('汪汪~~~');
    }
    console.log('Dog.prototype-->',Dog.prototype);
    Dog.prototype=new Animal();
    var hashiqi=new Dog();
    console.log('Dog.prototype.constructor-->',Dog.prototype.constructor);//Dog.prototype=new Animal();执行之后,发现他的constructor不指向自身了;所以需要我们手动修改
    console.log('Dog--->',Dog);//Dog.prototype=new Animal();执行之后,发现他的constructor不指向自身了;所以需要我们手动修改
    Dog.prototype.constructor=Dog;
    console.log('修改后Dog.prototype.constructor-->',Dog.prototype.constructor);
    console.log('hashiqi->>>',hashiqi);//===构造函数Dog {bark: ƒ}
    console.log('hashiqi.__proto__->>>',hashiqi.__proto__);//===Dog的原型对象
    console.log('Dog.prototype->>>',Dog.prototype);//Dog.prototype=new Animal;会重写Dog的prototype,所以wangwang不存在

    hashiqi.bark()
    hashiqi.eats();//Dog.prototype=new Animal;会让Dog拥有Animal的constructor、prototype里的方法和属性
    hashiqi.eat();//Dog.prototype=new Animal;会让Dog拥有Animal的constructor、prototype里的方法和属性
    // hashiqi.wangwang();//is not a function

    console.log('使用object.create、Object.setPrototypeOf---------------------------');

    function Fish(){
        this.swim=function(){
            console.log('Fish swim');
        }
    }
    Fish.prototype=Object.create(Animal.prototype);
    // Object.setPrototypeOf(Fish.prototype,Animal.prototype);
    var fish=new Fish();
    console.log('Fish.prototype.eats-->',Fish.prototype.eats);
    console.log('fish.__proto__===Fish.prototype-->',fish.__proto__===Fish.prototype);
    
    fish.eats();
    fish.swim();
    fish.eat();//not a function 因为Object.create没有执行构造函数并修正this指向这一步,
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js中new 到底做了瓦特??比较new、Object.create、Object.setPrototypeOf 的相关文章

  • 为什么越来越多的企业选择云数据存储而放弃本地数据存储?

    随着企业的发展 它们会产生大量数据 企业已经意识到 利用他们的数据做出数据驱动的决策对于创新和保持竞争优势至关重要 本文将会探讨企业在收集和分析大数据时可能面临的主要挑战 以及将企业数据仓库部署到本地或云数据存储的选择 我们将根据安全性 成

随机推荐

  • 金融行业软件测试

    金融行业软件测试 一 什么是金融行业 二 金融行业的业务特点 1 金融行业的业务特点 三 金融行业测试主要测试范围 1 功能测试 2 业务验证测试 3 客户端测试 4 接口测试 5 性能测试 6 安全性测试 四 金融行业软件测试的现状 五
  • Qt-Web混合开发-QWebEngineView加载网页最小示例(1)

    Qt Web混合开发 QWebEngineView加载网页最小示例 文章目录 Qt Web混合开发 QWebEngineView加载网页最小示例 1 概述 2 实现效果 3 实现功能 4 关键代码 5 源代码 更多精彩内容 个人内容分类汇总
  • docker原理及服务编排

    一 什么是docker Docker 是一个开源项目 诞生于2013年初 最初是dotCloud公司内部的一个业余项目 它基于Google公司推出的Go语言实现 项目后来加入了Linux基金会 遵从了Apache 2 0协议 项目代码在Gi
  • C++之 引用(refer)

    含义 变量的别名 第二名称 作用 使用别名访问原名的内存空间 即别名与原名保存同样的内存空间 语法 数据类型 别名 原名 int b a 注意事项 引用必须要初始化 对于一个变量a 不能直接写int b 而需要写int b a 引用在初始化
  • 水箱计算机控制系统设计,三容水箱计算机控制实验系统设计与控制算法研究

    摘要 三容水箱是一种典型控制对象 许多现场控制类型可以抽象成三容水箱数学模型 可作为自动化控制领域研究对象 三容水箱是一种柔性结构系统 通过水箱管路的组合形成各阶控制对象类型并且对各种控制算法进行设计 仿真和验证 目前三容水箱存在实验类型单
  • zookeeper报错 JAVA_HOME is not set

    zookeeper报错 JAVA HOME is not set 很多开发者安装zookeeper的时候 应该会发现到这么一个问题 JAVA HOME is not set 好的 那么这个是什么意思呢 就是说你的 JAVA HOME 变量没
  • OCR文本检测模型:FCENet论文阅读笔记

    文章目录 前言 摘要 Abstract 1 介绍 Introduction 2 相关工作 Related Work 3 方法 Approach 3 1 傅里叶轮廓嵌入 Fourier Contour Embedding 3 2 FCENet
  • msvcp140.dll丢失的解决方法

    MSVCP140是一个非常重要的Windows系统文件 它是Microsoft Visual C Redistributable的一部分 用于运行许多应用程序和游戏 如果您在尝试启动某个应用程序或游戏时遇到了MSVCP140 dll缺失的错
  • 深度对抗学习在图像分割和超分辨率中的应用

    深度学习已经在图像分类 检测 分割 高分辨率图像生成等诸多领域取得了突破性的成绩 但是它也存在一些问题 首先 它与传统的机器学习方法一样 通常假设训练数据与测试数据服从同样的分布 或者是在训练数据上的预测结果与在测试数据上的预测结果服从同样
  • 信号处理基础——傅里叶变换与短时傅里叶变换

    目录 信号处理基础 傅里叶变换与短时傅里叶变换 1 FT与STFT概述 2 短时傅里叶变换 Short time Fourier Transform STFT 3 spectrogram函数 4 注意事项 5 实例分析 6 Chirp信号及
  • Chromium headless模式开发的一切

    获取和编译chromium Linux https chromium googlesource com chromium src refs heads main docs linux build instructions md Window
  • Python 基础合集4:Python的数据结构(str、list、tuple、dict、set)

    一 前言 本节主要介绍几种数据结构 str list tuple dict set 及其应用 增删改查和注意事项 环境说明 Python 3或anaconda 3 使用编辑器 jupyter notebook anaconda自带 Pyth
  • JDY-19蓝牙模块介绍及主、从机调试演示

    1 关于JDY 19蓝牙模块 1 产品简介 JDY 19透传模块是基于蓝牙4 2协议标准 工作频段为2 4GHZ范围 调制方式为GFSK 最大发射功率为4db 最大发射距离40米 采用进口原装芯片设计 支持用户通过AT命令修改设备名 波特率
  • PTA每日一题-Python-计算M和N的多个结果

    用户输入两个数M和N 用两个input语句输入 其中N是整数 计算M和N的5种数学运算结果 并依次输出 结果间用空格分隔 5种数学运算分别是 M与N的和 M与N的乘积 M的N次幂 M除N的余数 M和N中较大的值 实现 usr bin env
  • 此应用专为旧版Android打造,因此可能无法正常运行。请尝试检查更新或与开发者联系

    最近调试一款新的机型时 出现 此应用专为旧版Android打造 因此可能无法正常运行 请尝试检查更新或与开发者联系 提示 出现这种错误的原因 应用启动 startActivity时 流程会执行到realStartActivityLocked
  • 【雷达】接收和去噪L波段雷达接收到的信号研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 L波段雷达接收到的信号研究主要涉及到信号的
  • 用运算符重载实现分数的加减乘除(c++实现)

    此程序运用c 程序中的运算符重载来做 text cpp include
  • 使用swagger生成API的json文件

    使用swagger生成API的json文件 使用swagger可以方便的生成REST API 最近有机会了解一下 就记录下小小的踩坑经历吧 demo使用maven搭建 REST采用jersey swagger的版本选用了新版 即io swa
  • 评分算法(五星好评为例-vue)

    整体思路就是把所有的亮星 半星以及暗星放进一个数组 一般的评分后台仅仅只是返回一个数据 需要我们处理这个数据之后在前台显示出来图形化的星星 首先定义常量 星星的最大长度 const LENGTH 5 亮星 const CLS ON on 半
  • js中new 到底做了瓦特??比较new、Object.create、Object.setPrototypeOf

    实例化的时候我们都是这样 var box new BOX 那么new在中间有什么作用呢 new 先创建一个新对象b new Object 将构造函数作用域赋给新变量 b proto BOX prototype 执行构造函数中的代码 属性 方