Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >new 的原理

new 的原理

作者头像
心念
发布于 2023-01-11 12:50:36
发布于 2023-01-11 12:50:36
50100
代码可运行
举报
文章被收录于专栏:前端心念前端心念
运行总次数:0
代码可运行

new的作用

字面意思是用来调用构造函数(class),产出一个新对象。

就比如你买了个榨汁机(构造函数),然后按启动榨汁按钮(使用new),可以榨出一杯饮料或豆浆。

至于具体榨什么饮料,取决于你给它传递的参数。而榨汁机的功能是它本来就有的。

new的过程

1、(使用Object.create)创建一个新对象,并把它的原型,指向被new的构造函数的原型

2、(使用es6的apply方法)改变构造函数this指向并传参,把它的this指向给新对象

3、返回新对象

new和字面量创建对象的区别

字面量不会调用构造函数,节约性能。new需要调用构造函数,和一些其他方法,性能消耗更高

手写一个new方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1function _new(fn, ...arg) {
2    const obj = Object.create(fn.prototype);
3    const newObj = fn.apply(obj, arg);
4    return newObj instanceof Object ? newObj : obj;
5}
6
7// 使用的例子:
8function GirlFirend(name, age) {
9    this.name = name;
10    this.age = age;
11    this.sayName = function () {
12        console.log(this.name);
13    };
14}
15const xiaoMei = _new(GirlFirend, "Xiao Mei", 18)
16console.log(xiaoMei)  // GirlFirend {name: "Xiao Mei", age: 18, sayName: ƒ}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
彻底搞懂JS原型与原型链
说到JavaScript的原型和原型链,相关文章已有不少,但是大都晦涩难懂。本文将换一个角度出发,先理解原型和原型链是什么,有什么作用,再去分析那些令人头疼的关系。
hellocoder2029
2022/10/17
3.9K1
创建对象的几种方法及优缺点
使用字面量的方式更简单,其实他俩是一样的。 优点是足够简单,缺点是每个对象都是独立的。
九旬
2020/10/23
1K0
JS 原生方法原理探究(三):如何实现 new 操作符?
这是JS 原生方法原理探究系列的第三篇文章。本文会介绍如何模拟实现 new 操作符。关于 new 的具体用法,MDN 已经描述得很清楚了,这里我们只做简单的介绍,具体的重点在于如何模拟实现。
Chor
2021/06/08
1.1K0
JS 原生方法原理探究(三):如何实现 new 操作符?
call,apply,bind 的完全实现和理 解
apply(),call()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是第一个参数。
ZEHAN
2020/09/23
7950
JS入门难点解析10-创建对象
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
1.5K0
深入理解JavaScript面向对象的程序设计(一)——对象的创建
类似Java等面向对象语言中创建对象的语法,在 JavaScript中可以通过执行 new操作符后跟要创建的对象类型的名称来创建。JavaScript中通过如下方式可以创建一个Object对象:
CherishTheYouth
2020/11/12
4590
深入理解JavaScript面向对象的程序设计(一)——对象的创建
JavaScript(七)
这一篇,我们说说 ES 中的面向对象。 ECMAScript 中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。 ECMA-262 把对象定义为: “无序属性的集合,其属性可以包含基本值、对象或者函数。” 对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。我们可以把 ECMAScript 的对象想象成散列表: 一组键值对,其中值可以是数据或函数。
1ess
2021/10/29
3160
彻底弄清 this call apply bind 以及原生实现
有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能
JS菌
2019/04/10
4330
彻底弄清 this call apply bind 以及原生实现
彻底弄清 this call apply bind 以及原生实现[2019-3-12更新]
有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能
JS菌
2019/04/10
3940
彻底弄清 this call apply bind 以及原生实现[2019-3-12更新]
557 原型prototype和原型链__proto__:原理,函数的三种角色,for in,手写new
Object.create(xxx):创建一个空对象,并且让把xxx作为创建对象的原型(空对象.__proto __ = xxx),xxx必须是对象或者null,如果xxx是null,则创建一个没有任何原型指向的空对象
全栈程序员站长
2022/09/07
2240
557 原型prototype和原型链__proto__:原理,函数的三种角色,for in,手写new
深入学习 JavaScript——面向对象
几乎所有面向对象的语言都有一个标志,那就是类,通过类创建具有相同属性和方法的对象。而 ECMAScript 中没有类的概念,它把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数”。即对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字,而这个名字都映射到一个值。因此对象的本质是一个散列表。
李振
2021/11/26
2030
ES6基础-ES6 class
面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它的特性有哪些。比如有姓名,性别,出生年月,身高等,还有人的行为,为吃饭,睡觉。特性和行为组合起来就成为人类,特性和行为都是人都有的,通过这些不同的特性和行为给不同的值,构成不同的人。
达达前端
2019/12/03
8000
ES6基础-ES6 class
从零开始学 Web 之 JavaScript(五)面向对象
(创建对象的最简单方式就是创建一个 Object 的实例,然后再为它添加属性和方法。)
Daotin
2018/08/31
4980
《JavaScript高级程序设计》学习笔记(5)——面向对象编程
 欢迎关注本人的微信公众号“前端小填填”,专注前端技术的基础和项目开发的学习。   本节内容对应《JavaScript高级程序设计》的第六章内容。 1、面向对象(Object-Oriented, OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。前面提到过,ECMAScript中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。 ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有
mukekeheart
2018/03/01
7420
重读《JavaScript高级程序设计》
ECMAScript 函数不能像传统意义上那样实现重载。而在其他语言(如Java)中,可以为一个函数编写两个定义,只要这两个定义的签名(接受的参数类型和数量)不同即可[p66]。ECMAScript的类型是松散形的,没有签名,所以是没有重载的。
Jimmy_is_jimmy
2019/07/31
1.1K0
前端学习(37)~js学习(十四):对象的创建
第一次看到这种工厂模式时,你可能会觉得陌生。如果简化一下,可以写成下面这种形式,更容易理解:(也就是,利用new Object创建对象)
Vincent-yuan
2020/03/18
1.7K0
前端手写代码原理实现
现在的前端门槛越来越高,不再是只会写写页面那么简单。模块化、自动化、跨端开发等逐渐成为要求,但是这些都需要建立在我们牢固的基础之上。不管框架和模式怎么变,把基础原理打牢才能快速适应市场的变化。下面介绍一些常用的源码实现:
WahFung
2020/08/24
4670
javaScript 的面向对象程序
数据属性(数据属性包含一个数据值的位置,这个位置可以读取和写入值,数据属性有4描述)
用户1197315
2019/12/30
1.2K0
面向对象的程序设计
ECMA-262把对象定义为:”无序属性的集合,其属性可以包含基本值、对象或者函数。”
奋飛
2019/08/15
4520
详解js原型,构造函数以及class之间的原型关系
含义: 是一个函数的属性,这个属性是一个指针,指向一个对象 作用: 构造函数调用 访问该构造函数所关联的原型对象
念念不忘
2019/03/29
1.7K0
详解js原型,构造函数以及class之间的原型关系
相关推荐
彻底搞懂JS原型与原型链
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验