JavaScript 复习之 Object对象的相关方法

JS对象原型详解

最新推荐文章于 2024-12-06 13:03:23 发布

weixin_34122548

最新推荐文章于 2024-12-06 13:03:23 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c777a29e51d454fbd5a85fe

本文深入解析JavaScript中对象的原型机制，包括Object.getPrototypeOf(), Object.setPrototypeOf(), Object.create()等方法的使用，以及如何通过原型链实现属性和方法的继承。

Object.getPrototypeOf()

返回参数对象的原型。

几种特殊对象的原型。

// 空对象的原型是 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()

为参数对象设置原型，返回该参数对象。它接受两个参数，第一个是现有对象，第二个是原型对象。

Object.create()

方法接受一个对象作为参数，然后以它为原型，返回一个实例对象。该实例完全继承原型对象的属性。

//原型对象
let A = {
    print:function(){
        console.log('hello');
    }
}

//实例对象
let B = Object.create(A);

Object.getPrototypeOf(B) === A // true
B.print() // hello
B.print === A.print // true
复制代码

if (typeof Object.create !== 'function') {
  Object.create = function (obj) {
    function F() {}
    F.prototype = obj;
    return new F();
  };
}
复制代码

上面代码表明，Object.create方法的实质是新建一个空的构造函数F，然后让F.prototype属性指向参数对象obj，最后返回一个F的实例，从而实现让该实例继承obj的属性。

Object.create方法生成的新对象，动态继承了原型。在原型上添加或者修改任何方法，会立刻反应在新对象上。

Object.create还可以接收第二个参数，该参数是一个属性描述对象，会添加到实例对象，作为该对象自身的属性。

Object.create方法生成的对象，继承了它的原型对象的构造函数。

function A() {}
var a = new A();
var b = Object.create(a);

b.constructor === A // true
b instanceof A // true
复制代码

Object.prototype.isPrototypeOf()

判断对象是否为参数对象的原型。

var o1 = {};
var o2 = Object.create(o1);
var o3 = Object.create(o2);

o2.isPrototypeOf(o3) // true
o1.isPrototypeOf(o3) // true
复制代码

Object.prototype.proto

返回该对象的原型，该属性可读写。

var obj = {};
var p = {};

obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true
复制代码

Object.getOwnPropertyNames()

方法返回一个数组，成员是参数对象本身的所有属性的键名，不包含继承的属性键名。

Object.prototype.hasOwnProperty()

方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。

in 运算符和 for...in 循环

in运算符返回一个布尔值，表示一个对象是否具有某个属性。

获得对象的所有可遍历属性（不管是自身的还是继承的），可以使用for...in循环。

对象的拷贝

拷贝一个对象，需要做到下面两件事：

确保拷贝后的对象，与原对象具有同样的原型
确保拷贝后的对象，与原对象具有同样的实例属性

function copyobj(obj){
    var copy = Object.create(obj.prototype);
    coopyOwnPropertiesFrom(copy,obj);
    return copy;
}
function coopyOwnPropertiesFrom(target,source){
    Object
    .getOwnPropertyNames(source)
    .forEarch(funciton(propKey){
        var desc = Object.getOwnPropertyDescriptor(source,peopKey);
        Object.defineProperty(target, propKey, desc);
    });
    
    return target;
}
复制代码

另一种更简单的写法，是利用 ES2017 才引入标准的Object.getOwnPropertyDescriptors方法。

function copyObject(orig) {
  return Object.create(
    Object.getPrototypeOf(orig),
    Object.getOwnPropertyDescriptors(orig)
  );
}
复制代码

转载于:https://juejin.im/post/5c777a29e51d454fbd5a85fe