js 中 new 与 Object.create()的区别

前言

在js中,创建对象有三种方式

  1. {} // 对象字面量
  2. new Object()
  3. Object.create()

1和2的区别很小,1不能传参,2可以传参。

new Object() 和Object.create() 区别就比较大了

1. new关键字

new 关键字做了几件事

  1. 创建一个新对象
  2. 将新对象的原型指向构造函数的原型
  3. 执行构造函数,绑定this
  4. 返回这个对象

比如创建一个Car对象,伪代码

// new Car()
var obj = new Object()
obj._proto_ = Car.prototype
// 执行构造函数, 绑定this
Car.call(obj)

我们注意到比较关键的地方是,它调用了Car对象的构造函数,并通过call将obj的this绑定到了Car对象上

这一步操作将Car对象上的属性,继承到了obj上

2. Object.create()

Object.create做了什么事情呢?

它同样是创建一个新对象,将新对象的原型关联到构造函数上

var f = function() { }
f.prototype = Car
return new f()

可以看出,在Object.create的内部,并没有去调用Car构造函数,而是调用了创建新对象的构造函数,因此Car上的属性不会继承到Object.create创建的实例中

3. 例子

比较鲜明的地方是在继承的时候

子类去继承父类的原型方法的时候,很多人会这样写

// 父类是People,子类是Male
Male.prototype = new People()

new确实能够继承,但是调用了父类的构造函数,把父类的属性也给继承到了原型上,但是我们仅仅只是想要父类的原型方法,所以这样写是存在副作用的

正确的写法应该是

Male.prototype = Object.create(People.prototype)

这种方式,不会调用父类的构造函数,而是生成新对象,将新对象与父类原型关联,然后new这个新对象返回

new 构造函数的方式转变了成 new 新对象的方式,这样就更加纯净,干脆

原文地址:https://www.cnblogs.com/zzzmj/p/11402793.html

时间: 2024-09-30 20:09:36

js 中 new 与 Object.create()的区别的相关文章

js中==、===和Object.is()的区别

1. == :等于,两边值类型不同的时候,先进行类型转换,再比较: 2. === :严格等于,只有当类型和值都相等时,才相等: 3. Object.is() :与 === 的作用基本一样,但有些许不同. == 和 === 的区别 == 和 === 的最大区别就是前者不限定类型而后者限定类型.如下例,如果想要实现严格相等(===),两者类型必须相同. 1 == "1"; // true 1 === "1"; // false 0 == false; // true 0

js中style,currentStyle和getComputedStyle的区别

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或<sytle>标签中的margin-top之类的样式值(包括width,height等). 这就是style属性的限制: style :只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.(内联样式: body中标签里用style直接写的样式.) currentStyle :可以弥补style的不足,但是只适用

JS中NaN、null、Undefined区别

1.NaN(not a number)非数字.不和任何数字相等,包括自己本身,可以用isNaN()判断,当praseInt()和praseFloat()不能解析时返回NaN.NaN为number对象下的一个属性,number.NaN typeof(NaN)   //return number NaN == NaN   //return FALSE 2.null 表示尚未存在的对象, 3.undefined表示尚未初始化   var a:alert(a)  //return undefined 在

js中callback.call()和callback()的区别

js中callback.call()和callback()的区别在js中callback.call()和callback() 有什么区别,举个例子:function a(){alert('hello!');}function b(callback){callback();}function c(callback){callback.call();}function test(){b(a);c(a);}在test函数中,b和c的效果是一样的,都执行了回调函数a.这两种用法有什么区别呢? -----

JS中的setTimeout和setInterval的区别

学了许久的javascript,发现其中非常常用的两个函数,就是setInterval和setTimeout函数,对这两个函数的理解,有时觉得很模糊,经过多次的试验,终于对它有了比较深入的了解.定义,setInterval()-- 间隔指定的毫秒数不停地执行指定的代码.setTimeout,延迟两秒调用函数,这个定义非常的简单,但是它并不像字面意思上那么的简 很多人都觉得这两个方法差不多,但是,实际上,他们差的很远呢     因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指

JS中三目运算符和if else的区别分析与示例

本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家. 今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码代码如下: if(n >= count-1){n =0;}else{n ++;} 随后代码写完了,准备优化一下代码,将此段改成了三目运算符的写法 复制代码代码如下: n = n >= (count-1) ? n=0 : n++ 结果完全不同 随后研究了一下这两者的区别,总结为一句话:三目运算有返回值,i

JS中构造函数与普通函数的区别及JS构造函数、原型和实例的关系

JS中构造函数与普通函数的区别: https://www.cnblogs.com/cindy79/p/7245566.html JS构造函数.原型和实例的关系: https://blog.csdn.net/u012443286/article/details/78823955 JavaScript构造函数及原型对象: https://blog.csdn.net/a153375250/article/details/51083245 原文地址:https://www.cnblogs.com/jim

js中数组,对象,json区别

对于js新手,这是我这周项目总结.包括数组,对象,json区别,以及前后台数据传输 数组:批量存放数据的工具,包括取值,数组的各种操作,[ ]在js中只表示数组,或者访问对象的属性,昨天还碰到了将值转化为数组,进行json字符转转化的例子.下面会给出具体例子 var arrData=["1","2","3']; var arrData=new Array(); var paramvo=[task_id];// 定义数组paramvo,值为[9999],方便

js中的target与currentTarget的区别&lt;转&gt;

关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶段.只有当他们同事处于目标阶段的时候他们的指向才是一样的,请看以下代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>js性能优化</title