平时代码中必定会使用对象,通常是用最直接的字面量方法创建var obj = {}
,最近在整理JS继承方式时遇到Object.create()
也可以创建对象,另外,也可以用new Object()
关键字创建。 那这三种方式有差别吗?
直接字面量创建
var objA = {};
objA.name = 'a';
objA.sayName = function() {
console.log(`My name is ${this.name} !`);
}
// var objA = {
// name: 'a',
// sayName: function() {
// console.log(`My name is ${this.name} !`);
// }
// }
objA.sayName();
console.log(objA.__proto__ === Object.prototype); // true
console.log(objA instanceof Object); // true
复制代码
new关键字创建
var objB = new Object();
// var objB = Object();
objB.name = 'b';
objB.sayName = function() {
console.log(`My name is ${this.name} !`);
}
objB.sayName();
console.log(objB.__proto__ === Object.prototype); // true
console.log(objB instanceof Object); // true
复制代码
在JS的指向问题中讲new绑定时讲了new
操作符其实做了以下四步:
var obj = new Object(); // 创建一个空对象
obj.__proto__ = Object.prototype; // obj的__proto__指向构造函数Object的prototype
var result = Object.call(obj); // 把构造函数Object的this指向obj,并执行构造函数Object把结果赋值给result
if (typeof(result) === 'object') {
objB = result; // 构造函数Object的执行结果是引用类型,就把这个引用类型的对象返回给objB
} else {
objB = obj; // 构造函数Object的执行结果是值类型,就返回obj这个空对象给objB
}
复制代码
这样一比较,其实字面量创建和new关键字创建并没有区别,创建的新对象的__proto__
都指向Object.prototype
,只是字面量创建更高效一些,少了__proto__
指向赋值和this
。
Object.create()
Object.create()
方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
。 MDN
const person = {
isHuman: false,
printIntroduction: function () {
console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
}
};
const me = Object.create(person); // me.__proto__ === person
me.name = "Matthew"; // name属性被设置在新对象me上,而不是现有对象person上
me.isHuman = true; // 继承的属性可以被重写
me.printIntroduction(); // My name is Matthew. Am I human? true
复制代码
Object.create(proto[, propertiesObject])
proto
必填参数,是新对象的原型对象,如上面代码里新对象me
的__proto__
指向person
。注意,如果这个参数是null
,那新对象就彻彻底底是个空对象,没有继承Object.prototype
上的任何属性和方法,如hasOwnProperty()、toString()
等。
var a = Object.create(null);
console.dir(a); // {}
console.log(a.__proto__); // undefined
console.log(a.__proto__ === Object.prototype); // false
console.log(a instanceof Object); // false 没有继承`Object.prototype`上的任何属性和方法,所以原型链上不会出现Object
复制代码
propertiesObject
是可选参数,指定要添加到新对象上的可枚举的属性(即其自定义的属性和方法,可用hasOwnProperty()
获取的,而不是原型对象上的)的描述符及相应的属性名称。
var bb = Object.create(null, {
a: {
value: 2,
writable: true,
configurable: true
}
});
console.dir(bb); // {a: 2}
console.log(bb.__proto__); // undefined
console.log(bb.__proto__ === Object.prototype); // false
console.log(bb instanceof Object); // false 没有继承`Object.prototype`上的任何属性和方法,所以原型链上不会出现Object
// ----------------------------------------------------------
var cc = Object.create({b: 1}, {
a: {
value: 3,
writable: true,
configurable: true
}
});
console.log(cc); // {a: 3}
console.log(cc.hasOwnProperty('a'), cc.hasOwnProperty('b')); // true false 说明第二个参数设置的是新对象自身可枚举的属性
console.log(cc.__proto__); // {b: 1} 新对象cc的__proto__指向{b: 1}
console.log(cc.__proto__ === Object.protorype); // false
console.log(cc instanceof Object); // true cc是对象,原型链上肯定会出现Object
复制代码
Object.create()
创建的对象的原型指向传入的对象。跟字面量和new
关键字创建有区别。
- 自己实现一个Object.create()
Object.mycreate = function(proto, properties) {
function F() {};
F.prototype = proto;
if(properties) {
Object.defineProperties(F, properties);
}
return new F();
}
var hh = Object.mycreate({a: 11}, {mm: {value: 10}});
console.dir(hh);
复制代码
总结
- 字面量和
new
关键字创建的对象是Object
的实例,原型指向Object.prototype
,继承内置对象Object
Object.create(arg, pro)
创建的对象的原型取决于arg
,arg
为null
,新对象是空对象,没有原型,不继承任何对象;arg
为指定对象,新对象的原型指向指定对象,继承指定对象
转载2
前几天有碰到原型的问题。之前以为自己对原型还是有所了解,但是细细研究,发现自己对原型的理解还是太年轻了。
Object.create 和new
创建对象的方式,我以我碰到的两种创建方式,Object.create 和new来说明
var Base = function () {}
var o1 = new Base();
var o2 = Object.create(Base);
那这样到底有什么不一样呢?
我先来一段Object.create的实现方式
Object.create = function (o) {
var F = function () {};
F.prototype = o;
return new F();
};
可以看出来。Object.create是内部定义一个对象,并且让F.prototype对象 赋值为引进的对象/函数 o,并return出一个新的对象。
再看看var o1 = new Base()的时候new做了什么。
JavaScript 实际上执行的是:
var o1 = new Object();
o1.[[Prototype]] = Base.prototype;
Base.call(o1);
new做法是新建一个obj对象o1,并且让o1的__proto__指向了Base.prototype对象。并且使用call 进行强转作用环境。从而实现了实例的创建。
我们来看看两个对象打印情况。
看似是一样的。
我们对原来的代码进行改进一下。
var Base = function () {
this.a = 2
}
var o1 = new Base();
var o2 = Object.create(Base);
console.log(o1.a);
console.log(o2.a);
可以看到Object.create 失去了原来对象的属性的访问。
那再看看prototype呢?(一开始没理解prototype和__proto__ 的关系。造成对这两种方式的创建理解非常费解)。
再一次对代码进行改进。
var Base = function () {
this.a = 2
}
Base.prototype.a = 3;
var o1 = new Base();
var o2 = Object.create(Base);
console.log(o1.a);
console.log(o2.a);
我一开始以为输出的值是2,3。。。以为prototype还是存在的。。结果发现真的发错特错。我们看运行的结果。
依旧是如此。
那我们就以图说话。
(F在创建后被销毁)
看完上图,我们就知道了,为什么通过Object.create构造的连Base原型上的属性都访问不到,因为他压根就没有指向他的prototype。这也就说明了__proto__ 和 prototype 的区别。所以上面在prototype定义的a,只是Base的prototype对象上的一个属性。
再来看看就是:
new关键字必须是以function定义的。
Object.create 则 function和object都可以进行构建。
小结
比较 new Object.create
构造函数 保留原构造函数属性 丢失原构造函数属性
原型链 原构造函数prototype属性 原构造函数/(对象)本身
作用对象 function function和object
instanceof 和 isPrototypeOf
写了创建一个对象实例,并且说了通过原型链来完成这一个个对象之间的联系,但是你怎么知道就一定含有呢?所以我们需要一个判断机制。
function Foo(){
//...
}
Foo.prototype.ff = 2;
var a = new Foo();
a instanceof Foo; //true
instanceof 说的是在a的整条[[Prototype]] 是否含有Foo.prototype对象。 但是这个方法只能实现对象(a)和函数(带.prototype引用的Foo),如果你想判断两个对象(a 和 b)是否通过[[Prototype]]链关联。只用instanceof就无法实现。
所以这里用到了isPrototypeOf。
var a = {};
var b = Object.ceate(a);
1
2
b.isPrototypeOf(a);//在a的[[Prototype]]是否出现过b来判断。
来看看isPrototypeOf实现方式。
function isRelatedTo(o1,o2){
function F(){}
F.prototype = o2;
return o1 instanceof F;
}
上述函数通过了构建一个辅助函数F,构建了一个prototype对象。从而达到instanceof比较的条件。
console.log(a.isPrototypeOf(b) === isRelatedTo(b,a));// true
constructor
举例来说,.constructor是在函数声明时候的默认属性。
我们先来看看下面的代码。
function Foo(){
}
console.log(Foo.prototype.constructor === Foo);//true
var a = new Foo();
console.log(a.constructor === Foo);//true
看起来a.constructor === Foo 为真,意味着a的确有一个.constructor指向Foo的.constructor属性。
但是可能出于不理解,或者很多的误操作,都会导致我们.constructor指向的丢失。如下:
function Foo(){
}
Foo.prototype = {}
var a1 = new Foo();
console.log(a1.constructor === Foo);//false
console.log(a1.constructor === Object);//true
可以看到a1并没有.constructor属性。那是为什么呢。?因为a1没有.constructor属性,他会委托[[prototype]]链上的Foo.prototype。但是新建的Foo.prototype也没有.constructor,所以继续往上找,一直到了顶端的Object.prototype。
再来,为了绝对的保证我的代码可靠,不被一些错误操作,影响我们的执行。
function Foo(){
}
Foo.prototype = {}
var a1 = new Foo();
Object.defineProperty(Foo.prototype, "constructor", {
enumerable: false,
writeable:true,
configureable: true,
value: Foo // 让.constructor指向Foo
})
想要说明的就是一点对于.constructor,我们并不能完全信任,稍不留神,一个手误或者不懂原理就去改对象。会发生惨烈的指向错误,所以认为constructor的意思是“由…构造”,这个误解代价太高了。
所以可以看出.constructor是一个非常不可靠,并且不安全的引用。在开发中尽量避免使用这些引用。如果用了,请记得检查你的原型,避免出现.constructor丢失。