首页
学习
活动
专区
圈层
工具
发布

JS 手写: new

# 介绍 MDN-new 运算符 (opens new window) # Try it new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。...# 描述 new 关键字会进行如下的操作: 创建一个空的简单 JavaScript 对象(即{}); 为步骤 1 新创建的对象添加属性__proto__,将该属性链接至构造函数的原型对象 ; 将步骤 1...创建一个用户自定义的对象需要两步: 通过编写函数来定义对象类型。 通过 new 来创建对象实例。...创建一个对象类型,需要创建一个指定其名称和属性的函数;对象的属性可以指向其他对象,看下面的例子: 当代码 new Foo(...)...new Foo 等同于 new Foo(),也就是没有指定参数列表,Foo 不带任何参数调用的情况。 由构造函数返回的对象就是 new 表达式的结果。

2.2K10

理解js中的new

new 操作符 在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在Javascript中,我们将这类方式成为Pseudoclassical...基于上面的例子,我们执行如下代码 var obj = new Base(); 这样代码的结果是什么,我们在Javascript引擎中看到的对象模型是: ? new操作符具体干了什么呢?...例如代码如下: Base.prototype.toString = function() {     return this.id; } 那么当我们使用new创建一个新对象的时候,根据__proto...__的特性,toString这个方法也可以做新对象的方法被访问到。...于是通过函数对象和Javascript特有的__proto__与prototype成员及new操作符,模拟出类和类实例化的效果。

4K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Js的new运算符

    new运算符 在JavaScript中,new是一个语法糖,可以简化代码的编写,可以批量创建对象实例。...语法糖Syntactic sugar,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。...对象实例,假如使用new关键字可以简化操作,还可以使用原型链来共享属性等操作。...Student(i)); } console.log(stuGroup); new运算符的操作 创建一个空的简单JavaScript对象(即{}) 链接该对象(即设置该对象的构造函数)到另一个对象 将步骤...1新创建的对象作为this的上下文 如果该函数没有返回对象,则返回this function _new(base,...args){ var obj = {}; obj.

    4.5K30

    搞清楚 js new

    new 构造函数里的this以及返回值 /** * new 构造函数里面的this * 默认函数里面的this,谁调用就指向谁, * 但是new 构造函数,这个构造函数里面的this指向是new...,则返回值为new 构造函数出来的实例 * 2,如果返回的是一个非基本数据类型的对象(object),则返回值为指定的对象 * 如果new 构造函数里面没有返回值,默认返回undefined,则返回值还是...('test2') console.log(test2); //{age: 18} 没有new得到的是什么 /** * 首先我们看没有new的时候,得到的是什么 * 根据控制台打印,可知没有new...的时候,得到的dog只有自身的name属性,以及__proto__ * 而没有new的__proto__,指向的就是Object.prototype */ console.log('-------没有...* 首先我们要知道new之后的是什么, * 根据控制台打印,可知new之后,cat除了有自身的name属性,还有__proto__ * 而__proto__指向的并不是默认的Object.prototype

    3K20

    模拟实现 new 操作符(js)

    首先需要理解,JavaScript 中的构造函数跟 Java 中的构造函数性质是不一样的。js 不是基于 class 这种静态类模式,而是基于原型对象的模式。...所以,在 js 中,new 操作符,其实可以通俗的理解成一个辅助工具,用来辅助函数构造出一个新对象。所以,我们才能够来模拟实现它,因为它其实通俗理解,就是一个工具函数。...new 操作符其实就是做了几件事: 创建一个继承自 A.prototype 的空对象 让空对象作为函数 A 的上下文,并调用 A 返回这个空对象 这是基本的 new 使用的场景,那么我们要来模拟实现的话...套用 MDN 对 new 的说明: new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。...没错,从引擎角度来看,的确是这样处理,但这些内部属性我们并没有办法看到的啊,那对于我们这些写 js 的来说,如何判断一个函数是否能够作为构造函数呢?靠经验积累?

    4.2K10

    【Vue.js】015-Vue:Vue中的MVVM、Vue的options选项

    除此之外,从Controller抽离出来的与UI有关的逻辑都放在了ViewModel中,这样就减轻了Controller的负担; 我简单的画了下MVVM的架构图: 从以上的架构图中,我们可以很清晰的梳理出各自的分工...如果MVVM没有Binder,那么它与MVC的差异不是很大; 2、Vue中的MVVM 结构图示: 实例图示: 四、Vue的options选项 1、参考文档 https://cn.vuejs.org/v2.../api/#选项-数据 2、先掌握三个 el: 类型:string | Element 限制:只在用 new 创建实例时生效; 详细: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标...得到深拷贝的原始数据对象; 实例: var data = { a: 1 } // 直接创建一个实例 var vm = new Vue({ data: data }) vm.a // => 1 vm...理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined; 示例: var vm = new Vue({ data: { a:

    67900

    Js中的new操作符起到什么作用?

    Js是当今时代最常用的代码操作语言,其中new操作符尤为常见。对于很多代码小白来说,并不清楚new在Js中扮演着怎样的角色,具体是做什么用,干了什么。...本文从new操作符的作用着手,简单介绍new操作符相关知识。1. 创建了一个空对象var obj=new Object();在Js代码中,new操作符的主要作用是产生对象。...通过new创建空对象,为创建对象打基底。2. 设置原型链obj.__proto__= Func.prototype;JS中在利用new操作符建好基底后,就开始下一步的Js代码操作,设置原型链。...var result =Func.call(obj);一般情况下,在Js代码组中,出现this时,构造函数内部是正常工作,但当通过new操作符改变this指向后,所出现的返回值会被正常的返回出去。...如果是引用类型,就返回到引用类型的对象。以上四点是new操作符在Js代码中的主要作用,对于Js代码小白希望可以有帮助。

    28010

    JS面向对象二:this原型链new原理

    JS面向对象二:this/原型链/new原理 阮一峰JavaScript教程:面向对象编程 阮一峰JavaScript教程:实例对象与 new 命令 阮一峰JavaScript教程:this 关键字 也可以看看这篇文章周大侠啊...但是由于回调函数的调用者往往不是我们自己,而是回调函数的接收者,即某个库或框架、甚至是JS运行时环境。...答案: 调用B处的console.log().结果是options window(console.log()中console是全局window对象里的一个方法) 第二题: ?...文中: **No. 1:Object.prototype No. 2:Function.prototype** 还有这几篇文章也不错: 「每日一题」什么是 JS 原型链?...- 方应杭的文章 - 知 周大侠啊 进击的 JavaScript 之 (七) 原型链 周大侠啊 进击的 JavaScript (八) 之 继承 new() 看看这篇文章很清楚: JS 的 new 到底是干什么的

    2.5K30
    领券