8,理解对象

需要反复看的

ECMAScript 6 专门为合并对象提供了 Object.assign()方法。这个方法接收一个目标对象和一个 1 或多个源对象作为参数,然后将每个源对象中可枚举(Object.propertyIsEnumerable()返回 true) 和自有(Object.hasOwnProperty()返回 true)属性复制到目标对象。以字符串和符号为键的属性 会被复制。对每个符合条件的属性,这个方法会使用源对象上的[[Get]]取得属性的值,然后使用目标 对象上的[[Set]]设置属性的值。

let dest, src, result;
/**
* 简单复制 */
2
3
 dest = {};
src = { id: 'src' }; 4
result = Object.assign(dest, src);
// Object.assign 修改目标对象
// 也会返回修改后的目标对象 console.log(dest === result); // true
5 6 7 8 9 10
 console.log(dest !== src);
console.log(result);
console.log(dest);
/**
* 多个源对象 */
// true
// { id: src }
// { id: src }
  dest = {};
result = Object.assign(dest, { a: 'foo' }, { b: 'bar' });
console.log(result); // { a: foo, b: bar }
/**
* 获取函数与设置函数 */
dest = {
  set a(val) {
    console.log(`Invoked dest setter with param ${val}`);
  }
    };
src = { 11
  get a() {
    console.log('Invoked src getter');
    return 'foo';
} };
Object.assign(dest, src);
// 调用 src 的获取方法
// 调用 dest 的设置方法并传入参数"foo"
// 因为这里的设置函数不执行赋值操作
// 所以实际上并没有把值转移过来 console.log(dest); // { set a(val) {...} }

 Object.assign()实际上对每个源对象执行的是浅复制。如果多个源对象都有相同的属性,则使 用最后一个复制的值。此外,从源对象访问器属性取得的值,比如获取函数,会作为一个静态值赋给目 标对象。换句话说,不能在两个对象间转移获取函数和设置函数。

如果赋值期间出错,则操作会中止并退出,同时抛出错误。Object.assign()没有“回滚”之前 赋值的概念,因此它是一个尽力而为、可能只会完成部分复制的方法。

let dest, src, result;
/*** 错误处理 */
    dest = {};
    src = {
        a: 'foo',
        get b() {
            // Object.assign()在调用这个获取函数时会抛出错误
            throw new Error();
        },
        c: 'bar' 
    };
    try {
        Object.assign(dest, src);
    } catch(e) {

    }
// Object.assign()没办法回滚已经完成的修改
// 因此在抛出错误之前,目标对象上已经完成的修改会继续存在:
    console.log(dest); 
    // { a: foo }

在 ECMAScript 6 之前,有些特殊情况即使是===操作符也无能为力:

// 这些是===符合预期的情况 console.log(true === 1); // false console.log({} === {}); // false console.log("2" === 2); // false
// 这些情况在不同 JavaScript 引擎中表现不同,但仍被认为相等

   console.log(+0 === -0);
console.log(+0 === 0);
console.log(-0 === 0);
// true
// true
// true
 // 要确定NaN的相等性,必须使用极为讨厌的isNaN() console.log(NaN === NaN); // false console.log(isNaN(NaN)); // true

// 这些情况在不同 JavaScript 引擎中表现不同,但仍被认为相等

console.log(+0 === -0);
console.log(+0 === 0);
console.log(-0 === 0);
// true
// true
// true

// 要确定NaN的相等性,必须使用极为讨厌的isNaN()

console.log(NaN === NaN); // false 
console.log(isNaN(NaN)); // true

为改善这类情况,ECMAScript 6 规范新增了 Object.is(),这个方法与===很像,但同时也考虑 到了上述边界情形。这个方法必须接收两个参数:

 console.log(Object.is(true, 1));  // false
 console.log(Object.is({}, {}));   // false
console.log(Object.is("2", 2));    // false
// 正确的 0、-0、+0 相等/不等判定  
console.log(Object.is(+0, -0)); // false
console.log(Object.is(+0, 0));  //true
console.log(Object.is(-0, 0));  // false

 // 正确的 NaN 相等判定 
console.log(Object.is(NaN, NaN)); // true


对象字面量创建对象
创建自定义对象的通常方式是创建 Object 的一个新实例,然后再给它添加属性和方法,如下例 所示:

let person = new Object();
person.name = "Nicholas";
person.age = 29; 
person.job = "Software Engineer";

person.sayName = function() {
    console.log(this.name); 
};

这个例子创建了一个名为 person 的对象,而且有三个属性(name、age 和 job)和一个方法 (sayName())。
sayName()方法会显示 this.name 的值,这个属性会解析为 person.name。早期 JavaScript 开发者频繁使用这种方式创建新对象。
几年后,对象字面量变成了更流行的方式。前面的例子如果使用对象字面量则可以这样写:

let person = {
    name: "Nicholas", 12 age: 29,
    job: "Software Engineer",
    sayName() {
        console.log(this.name); }
    };
}

使用new操作符的时候,生成对象的四个步骤
(1) 在内存中创建一个新对象。
(2) 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
(3) 构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)。
(4) 执行构造函数内部的代码(给新对象添加属性)。
(5) 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。

构造函数虽然有用,但也不是没有问题。构造函数的主要问题在于,其定义的方法会在每个实例上 都创建一遍。因此对前面的例子而言,person1 和 person2 都有名为 sayName()的方法,但这两个方 法不是同一个 Function 实例。
我们知道,ECMAScript 中的函数是对象,因此每次定义函数时,都会 初始化一个对象。逻辑上讲,这个构造函数实际上是这样的:

function Person(name, age, job){ 
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("console.log(this.name)"); // 逻辑等价 
}

这样理解这个构造函数可以更清楚地知道,每个 Person 实例都会有自己的 Function 实例用于显 示 name 属性。当然了,以这种方式创建函数会带来不同的作用域链和标识符解析。但创建新 Function 实例的机制是一样的。因此不同实例上的函数虽然同名却不相等,如下所示:

console.log(person1.sayName == person2.sayName); // false

console.log(Person.prototype.isPrototypeOf(person1)); // true console.log(Person.prototype.isPrototypeOf(person2)); // true

这里通过原型对象调用 isPrototypeOf()方法检查了 person1 和 person2。因为这两个例子内 部都有链接指向 Person.prototype,所以结果都返回 true。

ECMAScript 的 Object 类型有一个方法叫 Object.getPrototypeOf(),返回参数的内部特性 [[Prototype]]的值。例如:

console.log(Object.getPrototypeOf(person1) == Person.prototype); // true console.log(Object.getPrototypeOf(person1).name); // "Nicholas"

为避免使用 Object.setPrototypeOf()可能造成的性能下降,可以通过 Object.create()来创 建一个新对象,同时为其指定原型:

    let biped = {
      numLegs: 2
    };
    let person = Object.create(biped);
    person.name = 'Matt';

console.log(person.name);
console.log(person.numLegs); console.log(Object.getPrototypeOf(person) === biped); // true

知识点


面试要看
https://juejin.cn/post/6946022649768181774#heading-44
1, 工厂模式
    code

    缺点

    工厂模式无法解决对象的识别问题: 不知道对象是什么类型的。
    使用工厂函数创建的对象,只有开发者是知道它的类型的(通过工厂函数变量名),但是程序仍然认为它是一个普通的对象。
    每个对象都是通过工厂造就的全新的对象。
2, 构造函数模式
      构造函数是用来创建特定的类型的对象的。比如Js原生提供的Object, Array。都是构造函数模式创建的原生构造函数。

定义自定义构造函数可以确保实例被标识为特定类型,相比于工厂模式,这是一个很大的好处。在 这个例子中,person1 和 person2 之所以也被认为是 Object 的实例,
是因为所有自定义对象都继承 自 Object(后面再详细讨论这一点)。

function Person(name, age, job){ 
    console.log(this)
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() { 
        console.log(this.name);
    };
}

3,原型模式

二;理解原型

在自定义构造函数时,原型对象默认只会获得 constructor 属性,其他的所有方法都继承自 Object。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值