JavaScript面向对象编程 - Object 对象的相关方法

Object.getPrototypeOf()

- 返回参数对象的原型。这是获取原型对象的标准方法。
    function Fun(){

    }
    let subFun = new Fun();
    Object.getPrototypeOf(subFun) == Fun.prototype; // true


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

- 为参数对象设置原型,返回该参数对象。
  它接受两个参数,第一个是现有对象,第二个是原型对象。
  let person = {};
    let attribute = {
      a:'每天都要开心鸭',
      b:'没什么大不了的鸭'
    }
    Object.setPrototypeOf(person,attribute);
    Object.getPrototypeOf(person) === attribute; // true
    person.a; //'每天都要开心鸭'

- 还可以用setPrototypeOf方法模拟new命令

	function Per(){
      this.surname = 'zhong';
    }
    let yu = new Per();
	yu; //Per { surname: 'zhong' }

	// new命令等同于
    let yu2 = Object.setPrototypeOf({},Per.prototype);
    Per.call(yu2);
    yu2; //Per { surname: 'zhong' }

***************************************************************
	* new命令新建实例对象分成两步:
	 1,将一个空对象的原型设为构造函数的prototype属性
     2,将构造函数内部的this绑定这个空对象,然后执行构造函数,使得定义在this上面的方法和属性都转移到这个空对象上

Object.create()

- 解决从一个实例对象生成另一个实例对象
	// 原型对象
	let Per = {
      say: function() {
        console.log("多余的余鸭");
      }
    };
	//实例对象
    let yu = Object.create(Per);

    Object.getPrototypeOf(yu) === Per; // true
    yu.say(); // '多余的余鸭'  
    	
- 下面三种方式生成的新对象是等价的

    let obj1 = Object.create({});
    let obj2 = Object.create(Object.prototype);
    let obj3 = new Object();

- 如果想要生成一个不继承任何属性(比如没有toString()和valueOf()方法)的对象,可以将Object.create()的参数设为null

	let obj = Object.create(null); //[Object: null prototype] {}

- 使用Object.create()方法的时候,必须提供对象原型,即参数不能为空或者不是对象,否则会报错

- Object.create()方法生成的新对象,动态继承了原型。在原型上添加或修改任何方法,会立刻反映在新对象之上

- Object.create()方法还可以接受第二个参数。该参数是一个属性描述对象,它所描述的对象属性,会添加到实例对象,作为该对象自身的属性
	let obj = Object.create({}, {
      p1: {
        value: 123,
        enumerable: true,
        configurable: true,
        writable: true,
      },
      p2: {
        value: 'abc',
        enumerable: true,
        configurable: true,
        writable: true,
      }
    });

    // 等同于
    let obj = Object.create({});
    obj.p1 = 123;
    obj.p2 = 'abc';

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

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

    b.constructor === A; // true
    b instanceof A; // true

Object.prototype.isPrototypeOf()

 - 用来判断该对象是否为参数对象的原型
	let o1 = {};
    let o2 = Object.create(o1);
    let o3 = Object.create(o2);
    o2.isPrototypeOf(o3); // true o2是否为o3的原型
    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 __

实例对象的__proto__属性,返回该对象的原型。该属性可读写。

根据语言标准,__proto__属性只有浏览器才需要部署,其他环境可以没有这个属性。它前后的两根下划线,表明它本质是一个内部属性,不应该对使用者暴露。因此,应该尽量少用这个属性,而是用Object.getPrototypeOf()Object.setPrototypeOf(),进行原型对象的读写操作。

let o1 = {};
let o2 = {};
o1.__proto__ = o2;
Object.getPrototypeOf(o1) === o2;// true
Object.getPrototypeOf(o1) === o1.__proto__; // true
let y1 = {
  name: "中小余"
};
let y2 = {
  name: "中小鱼"
};
let waiter = {
  do: function() {
    console.log("你好,我是" + this.name + "我要点份酸菜鱼");
  }
};
y1.__proto__ = waiter;
y2.__proto__ = waiter;
y1.do(); //'你好,我是中小余我要点份酸菜鱼'
y2.do(); //'你好,我是中小鱼我要点份酸菜鱼'
y1.do() == waiter.do(); // true

获取原型对象方法的比较

- obj.__proto__
	//__proto__属性指向当前对象的原型对象,即构造函数的prototype属性

	缺点:__proto__属性只有浏览器才需要部署,其它环境可以不部署
    
- obj.constructor.prototype
	缺点:手动改变原型对象  但没有及时改变constructor.prototype的指向时,可能会失效
    
- Object.getPrototypeOf(obj)【推荐使用】

Object.getOwnPropertyNames()

- 返回一个数组,成员是参数对象本身的所有属性的键名(不管是否可以遍历),不包含继承的属性键名
 * 如果只获取那些可以遍历的属性,使用Object.keys方法。

	Object.getOwnPropertyNames(Date); //[ 'length', 'name', 'prototype', 'now', 'parse', 'UTC' ]
	Object.keys(Date);// []  没有可以遍历的属性

	let per = {
      name: "<",
      age: 18
    };
    Object.getOwnPropertyNames(per);//[ 'name', 'age' ]
    Object.keys(per);//[ 'name', 'age' ]

Object.prototype.hasOwnProperty()

 - 用来判断某个属性定义在对象自身,还是定义在原型链上,返回一个布尔值
	let per = {
      name: "<",
      age: 18
    };

    per.hasOwnProperty("name"); // true  name是对象per自身属性
    per.hasOwnProperty("toString"); // false toString是对象per继承的属性

	//  hasOwnProperty方法是JS中唯一一个处理对象属性时,不会遍历原型链的方法。

in 运算符和for …in循环

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

in 它不区分该属性是对象自身的属性,还是继承的属性

"length" in Date; // true
"toString" in Date; //true

for…in :获得对象的所有可遍历属性(不管是自身的还是继承的)

let obj1 = {
  name: "<"
};
let obj2 = Object.create(obj1, {
  age: { value: 18, enumerable: true }
});
for (let item in obj2) {
  console.log(item);
}
//'age'
// 'name' 继承的也会被遍历

//不管是对象自身的属性还是继承的属性,for...in都会遍历到;如果只想获取自身的属性 可以彩用hasOwnproperty方法判断一下

for (let item in obj2) {
 if(obj2.hasOwnProperty(item)){
     console.log(item);
    }
}
// age  只返回age属性

获得对象的所有属性(不管是自身的还是继承的,也不管是否可枚举),可以使用下面的函数。

function inheritedPropertyNames(obj) {
  var props = {};
  while(obj) {
    Object.getOwnPropertyNames(obj).forEach(function(p) {
      props[p] = true;
    });
    obj = Object.getPrototypeOf(obj);
  }
  return Object.getOwnPropertyNames(props);
}
inheritedPropertyNames(Date)

/*
[
            'length',                 'name',
         'prototype',                  'now',
             'parse',                  'UTC',
         'arguments',               'caller',
       'constructor',                'apply',
              'bind',                 'call',
          'toString',     '__defineGetter__',
  '__defineSetter__',       'hasOwnProperty',
  '__lookupGetter__',     '__lookupSetter__',
     'isPrototypeOf', 'propertyIsEnumerable',
           'valueOf',       'toLocaleString'
]
*/

对象的拷贝

如果要拷贝一个对象,需要做到下面两件事情。

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

下面就是根据上面两点,实现的对象拷贝函数。

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 才引入标准的Object.getOwnPropertyDescriptors方法。

function copyObject(orig) {
  return Object.create(
    Object.getPrototypeOf(orig),
    Object.getOwnPropertyDescriptors(orig)
  );
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

中小余

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值