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

new 的原理

作者头像
心念
发布于 2023-01-11 12:50:36
发布于 2023-01-11 12:50:36
47600
代码可运行
举报
文章被收录于专栏:前端心念前端心念
运行总次数: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入门难点解析10-创建对象
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
1.5K0
js---对象 和 函数this
   当函数被保存为一个对象的属性时,它就可称为这个对象的方法。当一个方法被调用时,this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作(. 或 []),那么它被称为方法调用。例如:
小蔚
2019/09/11
1.4K0
彻底弄清 this call apply bind 以及原生实现[2019-3-12更新]
有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能
JS菌
2019/04/10
3870
彻底弄清 this call apply bind 以及原生实现[2019-3-12更新]
new原理实现
New内部原理: 产生一个空对象,对象的隐式原型__proto__属性指向该类(构造函数)的prototype属性,并将该对象赋值给this 给this赋值 返回这个this对象(注: 当构造函数内部设置返回且返回值为基本数据类型的时候,则忽略,依旧返回该this,否则,以自定义返回为准) function Say(name) { this.name = name; } Say.prototype.back = function () { console.l
子夜星辰
2022/11/15
2650
彻底搞懂JS原型与原型链
说到JavaScript的原型和原型链,相关文章已有不少,但是大都晦涩难懂。本文将换一个角度出发,先理解原型和原型链是什么,有什么作用,再去分析那些令人头疼的关系。
hellocoder2029
2022/10/17
3.1K1
创建对象的几种方法及优缺点
使用字面量的方式更简单,其实他俩是一样的。 优点是足够简单,缺点是每个对象都是独立的。
九旬
2020/10/23
9950
call,apply,bind 的完全实现和理 解
apply(),call()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是第一个参数。
ZEHAN
2020/09/23
7840
JavaScript(七)
这一篇,我们说说 ES 中的面向对象。 ECMAScript 中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。 ECMA-262 把对象定义为: “无序属性的集合,其属性可以包含基本值、对象或者函数。” 对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。我们可以把 ECMAScript 的对象想象成散列表: 一组键值对,其中值可以是数据或函数。
1ess
2021/10/29
3070
557 原型prototype和原型链__proto__:原理,函数的三种角色,for in,手写new
Object.create(xxx):创建一个空对象,并且让把xxx作为创建对象的原型(空对象.__proto __ = xxx),xxx必须是对象或者null,如果xxx是null,则创建一个没有任何原型指向的空对象
全栈程序员站长
2022/09/07
2200
557 原型prototype和原型链__proto__:原理,函数的三种角色,for in,手写new
重读《JavaScript高级程序设计》
ECMAScript 函数不能像传统意义上那样实现重载。而在其他语言(如Java)中,可以为一个函数编写两个定义,只要这两个定义的签名(接受的参数类型和数量)不同即可[p66]。ECMAScript的类型是松散形的,没有签名,所以是没有重载的。
Jimmy_is_jimmy
2019/07/31
1.1K0
面向对象的程序设计
ECMA-262把对象定义为:”无序属性的集合,其属性可以包含基本值、对象或者函数。”
奋飛
2019/08/15
4400
从零开始学 Web 之 JavaScript(五)面向对象
(创建对象的最简单方式就是创建一个 Object 的实例,然后再为它添加属性和方法。)
Daotin
2018/08/31
4860
前端学习(37)~js学习(十四):对象的创建
第一次看到这种工厂模式时,你可能会觉得陌生。如果简化一下,可以写成下面这种形式,更容易理解:(也就是,利用new Object创建对象)
Vincent-yuan
2020/03/18
1.7K0
彻底弄清 this call apply bind 以及原生实现
有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能
JS菌
2019/04/10
4220
彻底弄清 this call apply bind 以及原生实现
必知必会的JavaScript前端面试题篇(一),不看后悔!
1.函数调用模式:当一个函数不是一个对象的属性时,直接作为函数来调用时, 严格模式下指向 undefined, 非严格模式下,this 指向全局对象。
沉浸式趣谈
2024/03/13
1390
必知必会的JavaScript前端面试题篇(一),不看后悔!
JS 原生方法原理探究(三):如何实现 new 操作符?
这是JS 原生方法原理探究系列的第三篇文章。本文会介绍如何模拟实现 new 操作符。关于 new 的具体用法,MDN 已经描述得很清楚了,这里我们只做简单的介绍,具体的重点在于如何模拟实现。
Chor
2021/06/08
1.1K0
JS 原生方法原理探究(三):如何实现 new 操作符?
设计模式
前言: 面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScript中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。 ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数”。这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,可以把ECMAScript的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数。 每个对象都是基于一个引用类型创
小胖
2018/06/27
4120
深入理解JavaScript面向对象的程序设计(一)——对象的创建
类似Java等面向对象语言中创建对象的语法,在 JavaScript中可以通过执行 new操作符后跟要创建的对象类型的名称来创建。JavaScript中通过如下方式可以创建一个Object对象:
CherishTheYouth
2020/11/12
4430
深入理解JavaScript面向对象的程序设计(一)——对象的创建
《JavaScript高级程序设计》学习笔记(5)——面向对象编程
 欢迎关注本人的微信公众号“前端小填填”,专注前端技术的基础和项目开发的学习。   本节内容对应《JavaScript高级程序设计》的第六章内容。 1、面向对象(Object-Oriented, OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。前面提到过,ECMAScript中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。 ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有
mukekeheart
2018/03/01
7360
JS高级原型以及函数调用方式
Javascript 规定,每一个(构造)函数都有一个 prototype 属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。这也就意味着,我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上,以便让同一类型的对象共享方法或其它成员
用户6256742
2024/06/13
1690
JS高级原型以及函数调用方式
相关推荐
JS入门难点解析10-创建对象
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验