JavaScript 是一门集成了函数编程和面向对象编程的动态语言。它的对象是一个容器,封装了属性(property)和方法(method)。JavaScript的面向对象实现不是基于类,而是基于构造函数(constructor)和原型链(prototype)实现的。
一.概述
- Object.getPrototypeOf()方法? 解答: 获取参数对象的原型对象。具体见: Object.getPrototypeOf()
- Object.setPrototypeOf()方法? 解答:设置参数对象的原型对象。具体见: Object.setPrototypeOf()
- Object.create()方法? 解答:以某个对象为原型对象创建一个新对象。具体见: Object.create()
- Object.prototype.isPrototypeOf()方法? 解答: 实例对象的isPrototypeOf方法,用来判断该对象是否为参数对象的原型。具体见: Object.prototype.isPrototypeOf()
- Object.getOwnPropertyNames()和Object.keys()方法的区别? 解答:①:Object.getOwnPropertyNames方法返回一个数组,成员是参数对象本身的所有属性的键名,不包含继承的属性键名。②:Object.keys()只获取那些可以遍历的属性。具体见: Object.getOwnPropertyNames()和Object.keys()
- hasOwnProperty()方法? 解答:用于判断某个属性定义在对象自身,还是定义在原型链上。具体见: hasOwnProperty()
- in 运算符和 for…in 循环方法? 解答:in查询一个对象是否具有某个属性。包括自身的属性和继承属性。 for…in 遍历对象所有可遍历属性。具体见: in 运算符和 for…in 循环
二.Object.getPrototypeOf()
1.释义
-
Object.getPrototypeOf
方法返回参数对象的原型。这是获取原型对象的标准方法。//实例对象f的原型是F.prototype var F = function () {}; var f = new F(); Object.getPrototypeOf(f) === F.prototype // true
2.特殊原型对象
-
下面是几种特殊对象的原型。
// 空对象的原型是 Object.prototype Object.getPrototypeOf({}) === Object.prototype // true // Object.prototype 的原型是 null Object.getPrototypeOf(Object.prototype) === null // true // 函数的原型是 Function.prototype function f() {} Object.getPrototypeOf(f) === Function.prototype // true
三.Object.setPrototypeOf()
1.释义
-
Object.setPrototypeOf
方法为参数对象设置原型,返回该参数对象。它接受两个参数,第一个是现有对象,第二个是原型对象。//Object.setPrototypeOf方法将对象a的原型,设置为对象b,因此a可以共享b的属性 var a = {}; var b = {x: 1}; Object.setPrototypeOf(a, b); Object.getPrototypeOf(a) === b // true a.x // 1
2.使用
new
命令可以使用Object.setPrototypeOf
方法模拟//第一步,将一个空对象的原型设为构造函数的prototype属性(上例是F.prototype);第二步,将构造函数内部的this绑定这个空对象,然后执行构造函数,使得定义在this上面的方法和属性(上例是this.foo),都转移到这个空对象上。 var F = function () { this.foo = 'bar'; }; var f = new F(); // 等同于 var f = Object.setPrototypeOf({}, F.prototype); F.call(f);
四.Object.create()
1.释义
-
释义:
Object.create
方法,接受一个原型对象的参数,使用对象来创建一个实例对象。该实例完全继承参数对象的属性。 -
实质:
Object.create
方法的实质是新建一个空的构造函数B,然后让B.prototype属性指向参数对象A,最后返回一个B的实例,从而实现让该实例继承A的属性。
//Object.create方法以A对象为原型,生成了B对象。B继承了A的所有属性和方法。
// 原型对象
var A = {
print: function () {
console.log(‘hello’);
}
};
// 实例对象
var B = Object.create(A);
Object.getPrototypeOf(B) === A // true
B.print() // hello
B.print === A.print // true
```
2.注意
-
使用
Object.create
方法的时候,必须提供对象原型,即参数不能为空,或者不是对象,否则会报错。Object.create() // TypeError: Object prototype may only be an Object or null Object.create(123) // TypeError: Object prototype may only be an Object or null
-
Object.create
方法生成的新对象,动态继承了原型。在原型上添加或修改任何方法,会立刻反映在新对象之上。//修改对象原型obj1会影响到实例对象obj2 var obj1 = { p: 1 }; var obj2 = Object.create(obj1); obj1.p = 2; obj2.p // 2
-
Object.create
方法生成的对象,继承了它的原型对象的构造函数。function A() {} var a = new A(); var b = Object.create(a); b.constructor === A // true b instanceof A // true
3.使用
-
如下三种创建的方式等价。
var obj1 = Object.create({}); var obj2 = Object.create(Object.prototype); var obj3 = new Object();
-
如果想要生成一个不继承任何属性(比如没有
toString
和valueOf
方法)的对象,可以将Object.create
的参数设为null
。var obj = Object.create(null); obj.valueOf() // TypeError: Object [object Object] has no method 'valueOf'
五.Object.prototype.isPrototypeOf()
1.释义
-
实例对象的isPrototypeOf方法,用来判断该对象是否为参数对象的原型。
//一. o1和o2都是o3的原型。这表明只要实例对象处在参数对象的原型链上,isPrototypeOf方法都返回true var o1 = {}; var o2 = Object.create(o1); var o3 = Object.create(o2); o2.isPrototypeOf(o3) // true o1.isPrototypeOf(o3) // true //二. 由于Object.prototype处于原型链的最顶端,所以对各种实例都返回true,只有直接继承自null的对象除外 Object.prototype.isPrototypeOf({}) // true Object.prototype.isPrototypeOf([]) // true Object.prototype.isPrototypeOf(/xyz/) // true Object.prototype.isPrototypeOf(Object.create(null)) // false
六.Object.prototype.proto
1.释义
- 实例对象的__proto__属性(前后各两个下划线),返回该对象的原型。该属性可读写。但是不建议使用,因为只能在浏览器环境下使用。
七.Object.getOwnPropertyNames()和Object.keys()
1.Object.getOwnPropertyNames()
-
Object.getOwnPropertyNames
方法返回一个数组,成员是参数对象本身的所有属性的键名,不包含继承的属性键名。Object.getOwnPropertyNames(Date) // ["parse", "arguments", "UTC", "caller", "name", "prototype", "now", "length"]
2.Object.keys()
-
Object.keys()
只获取那些可以遍历的属性。Object.keys(Date) // []
八.hasOwnProperty()
-
对象实例的hasOwnProperty方法返回一个布尔值,用于判断某个属性定义在对象自身,还是定义在原型链上。
-
hasOwnProperty方法是 JavaScript 之中唯一一个处理对象属性时,不会遍历原型链的方法。
Date.hasOwnProperty('length') // true Date.hasOwnProperty('toString') // false
九.in 运算符和 for…in 循环
1.in 运算符
-
in
运算符返回一个布尔值,表示一个对象是否具有某个属性。包括自身的属性和继承属性。'length' in Date // true 'toString' in Date // true
2.for...in
循环
-
获得对象的所有可遍历属性(不管是自身的还是继承的),可以使用
for...in
循环。 -
为了在
for...in
循环中获得对象自身的属性,可以采用hasOwnProperty
方法判断一下。for ( var name in object ) { if ( object.hasOwnProperty(name) ) { /* loop code */ } }
-
获得对象的所有属性(不管是自身的还是继承的,也不管是否可枚举),可以使用下面的函数。
function inheritedPropertyNames(obj) { var props = {}; while(obj) { //获取本对象的属性key Object.getOwnPropertyNames(obj).forEach(function(p) { props[p] = true; }); //获取本对象的原型对象重新赋值给obj,当遍历到顶层原型对象null时候,跳出循环 obj = Object.getPrototypeOf(obj); } return Object.getOwnPropertyNames(props); } //使用 inheritedPropertyNames(Date) // [ // "caller", // "constructor", // "toString", // "UTC", // ... // ]
十.获取原型对象的比较
1.获取原型对象
-
获取实例对象obj的原型对象,有三种方法:
obj.__proto__
,obj.constructor.prototype
,Object.getPrototypeOf(obj)
,推荐使用第三种。//验证三种方式等价 var obj = new Object(); obj.__proto__ === Object.prototype // true obj.__proto__ === obj.constructor.prototype // true
十一.对象的拷贝
1.拷贝一个对象需要满足2个条件
-
一个是确保拷贝后的对象,与原对象具有同样的原型。
-
另一个是确保拷贝后的对象,与原对象具有同样的实例属性。
function copyObject(orig) { var copy = Object.create(Object.getPrototypeOf(orig)); copyOwnPropertiesFrom(copy, orig); return copy; } function copyOwnPropertiesFrom(target, source) { Object .getOwnPropertyNames(source) .forEach(function (propKey) { var desc = Object.getOwnPropertyDescriptor(source, propKey); Object.defineProperty(target, propKey, desc); }); return target; }
-
es2017新方式
S2017 才引入标准的Object.getOwnPropertyDescriptors方法