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 的相关文章

  • 面面俱到!涵盖Java所有核心技术,阿里新产2023版Java面试核心突击手册太全了!

    程序员面试背八股 可以说是现在互联网开发岗招聘不可逆的形式了 其中最卷的当属Java 网上动不动就是成千上百道的面试题总结 你要是都能啃下来 平时技术不是太差的话 面试基本上问题就不会太大 这时候尴尬的现象就出现了 虽然八股文背的好并不能代
  • 2024年java面试--mysql(3)

    系列文章目录 2024年java面试 一 spring篇 2024年java面试 二 spring篇 2024年java面试 三 spring篇 2024年java面试 四 spring篇 2024年java面试 集合篇 2024年java
  • atoi函数源代码

    atoi函数源代码 isspace int x if x x t x n x f x b x r return 1 else return 0 isdigit int x if x lt 9 x gt 0 return 1 else ret
  • 螺旋队列(由里向外)

    假设有如下排列 21 22 20 7 8 9 10 19 6 1 2 11 18 5 4 3 12 17 16 15 14 13 1的坐标是 0 0 3的坐标是 1 1 7的坐标是 1 1 分析 第1层之内有1个数 第2层之内有9个数 第3
  • Java基础面试题

    怎么理解栈 堆 堆中存什么 栈中存什么 栈是运行时的单位 而堆是存储的单位 栈解决程序的运行问题 即程序如何执行 或者说如何处理数据 堆解决的是数据存储的问题 即数据怎么放 放在哪儿 堆中存的是对象 栈中存的是基本数据类型和堆中对象的引用
  • C——指针与数组名的区别

    昨天晚上做了一套企业面试题 第一题便是 数组名与指针的区别 做了才知道自己知之甚少 学长说像这样的题纸上那点地方是不够用的 而我们能写出来的仅仅是两三行而已 所以特地在网上搜了一下 指针和数组名的共同特点是都是用来指代一个地址的 不同的是
  • 2023最全最新前端面试题(附加解答)

    JS 1 说一下innerHTML 与 innerText的作用与区别 作用 都可以获取或者设置元素的内容 区别 innerHTML可以解析内容中的html标签 innerText不能解析内容中的html标签 2 JavaScript 由以
  • Java面试----2018最全Redis面试题整理

    1 什么是Redis 答 Redis全称为 Remote Dictionary Server 远程数据服务 是一个基于内存的高性能key value数据库 2 Redis的数据类型 答 Redis支持五种数据类型 string 字符串 ha
  • 标识符和关键字的规则

    大家好 我是耀曜 这段事件没有怎么更新文章 主要是最近换工作 有一年的工作经验 说白了就是一个初级Java后端开发的新手 这段时间面了很多家 我也很纳闷问的都是基础差不多都忘掉了的 以后这段事间耀曜会发布一些关于面试的问题的总结 希望对看到
  • Java坑人面试题系列: 变量声明(中级难度)

    作用域规则与变量覆盖面试题 Java Magazine上面有一个专门坑人的面试题系列 https blogs oracle com javamagazine quiz 2 这些问题的设计宗旨 主要是测试面试者对Java语言的了解程度 而不是
  • 集合在多线程下 不安全的代码案例,以及解决方法

    package thread import java util import java util concurrent ConcurrentHashMap import java util concurrent CopyOnWriteArr
  • go语言面试题

    文章目录 1 下面这段代码输出什么 2 下面代码输出什么 3 同级文件的包名不允许有多个 是否正确 4 下面的代码有什么问题 请说明 1 下面这段代码输出什么 func main count 0 for i range 256 struct
  • 标识符和关键字应该如何理解?

    思考 为什么语言中需要关键字和表示符 程序来源于生活 想想我们人类在生产生活过程中的一些语言使用都有其特定的含义 而每个事物或者事物的一些属性功能也都需要给予特定的语言符号来表示 故java语言的发明者们按照人类的方式创造除了一门值得大家学
  • Vue中props组件和slot标签的区别

    在 Vue 中 props 和 slot 都是组件之间进行通信的机制 它们的作用和应用场景有一些区别 props 是一种组件的数据传递机制 通过在父组件中以属性的形式向子组件传递数据 子组件接收这些数据 并可以进行相应的处理和渲染 prop
  • 分布式缓存数据库面试题redis

    redis和memcached什么区别 为什么高并发下有时单线程的redis比多线程的memcached效率要高 区别 1 mc可缓存图片和视频 rd支持除k v更多的数据结构 2 rd可以使用虚拟内存 rd可持久化和aof灾难恢复 rd通
  • 《剑指offer》系列---2

    1 求斐波那契数列的第N项 这个题目很简单 讲递归的书上都是用这个来讲的 但是面试的时候 如果你写个递归 那估计会让人失望的 因为递归的效率真是一个问题 你可以测试一下 输入50 基本上得到结果的时间 够你去喝杯茶了 include
  • 微信小程序面试题大全

    1 简述微信小程序的相关文件类型 WXML 搭建页面的结构 WXSS 页面样式文件 js 逻辑处理 网络请求 json 配置当前页面标题和引入组件等 app js 可以在里边监听生命周期函数 声明全局变量 app json 小程序的全局配置
  • 面试高频的CMS回收器

    CMS回收器 低延迟 想了解更多GC垃圾回收器的知识 可以看下面这篇文章JVM之垃圾回收篇 在JDK1 5时期 Hotspot推出了一款在强交互应用中几乎可认为有划时代意义的垃圾收集器 CMS Concurrent Mark Sweep 收
  • 操作系统常见面试题

    1 什么是进程 Process 和线程 Thread 有何区别 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动 进程是系统进行资源分配和调度的一个独立单位 线程是进程的一个实体 是CPU调度和分派的基本单位 它是比进程更小的能
  • 面试题:重量级锁的8连问,你能接住几个?

    文章目录 前言 名词解释 问题解析 问题1 ObjectMonitor和AQS有什么异同 问题2 为什么ObjectMonitor需要cxq和entryList两个等待队列 问题3 cxq队列中等待线程 什么时候会进到EntryList 问

随机推荐

  • 金融行业软件测试

    金融行业软件测试 一 什么是金融行业 二 金融行业的业务特点 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 执行构造函数中的代码 属性 方