红宝书——8.对象、类与面向对象编程02

最新推荐文章于 2024-08-19 10:59:54 发布

weixin_69058537

最新推荐文章于 2024-08-19 10:59:54 发布

阅读量98

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_69058537/article/details/130913651

版权

一.创建对象

ECMAScript 6 开始正式支持类和继承。ES6 的类旨在完全涵盖之前规范设计的基于原型的继承模
式。

1.工厂模式

function createPerson(name, age, job) {
        let o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
        console.log(this.name);
        };
        return o;
}
let person1 = createPerson("Nicholas", 29, "Software Engineer");
let person2 = createPerson("Greg", 27, "Doctor");

这种工厂模式虽然可以解决创建多个类似对象的问题，但没有解决对象标识问题（即新创建的对象是什么类型）。

2.构造函数模式

function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function() {
                console.log(this.name);
        };
}
let person1 = new Person("Nicholas", 29, "Software Engineer");
let person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); // Nicholas
person2.sayName(); // Greg

与工厂模式的区别

 没有显式地创建对象
 属性和方法直接赋值给了 this
 没有 return

new 操作符

(1) 在内存中创建一个新对象。
(2) 这个新对象内部的 [[Prototype]] 特性被赋值为构造函数的 prototype 属性。 (3) 构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。
(4) 执行构造函数内部的代码（给新对象添加属性）。
(5) 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。

这两个对象都有一个constructor 属性指向 Person ，如下所示：
console.log(person1.constructor == Person); // true
console.log(person2.constructor == Person); // true

constructor 本来是用于标识对象类型的。不过，一般认为 instanceof 操作符是确定对象类型
更可靠的方式。前面例子中的每个对象都是 Object 的实例，同时也是 Person 的实例

构造函数的问题

定义的方法会在每个实例上都创建一遍，因此不同实例上的函数虽然同名却不相等

解决：可以把函数定义转移到构造函数外部

function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = sayName;
}
function sayName() {
        console.log(this.name);
}
let person1 = new Person("Nicholas", 29, "Software Engineer");
let person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); // Nicholas
person2.sayName(); // Greg

虽然解决了相同逻辑的函数重复定义的问题，但全局作用域也因此被搞乱了，因为那个函数实际上只能在一个对象上调用。如果这个对象需要多个方法，那么就要在全局作用域中定义多个函数。这会导致自定义类型引用的代码不能很好地聚集一起。这个新问题可以通过原型模式来解决。

2.原型模式

每个函数都会创建一个 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。它上面定义的属性和方法可以被对象实例共享。

与构造函数模式不同，使用这种原型模式定义的属性和方法是由所有实例共享的。因此 person1 和 person2 访问的都是相同的属性和相同的 sayName() 函数。

ECMAScript 中原型的本质：

理解原型

1.函数创建一个 prototype 属性（指向原型对象）

2.原型对象自动获得一个名为 constructor 的属性，指回与之关联的构造函数

脚本中没有访问这个 [[Prototype]] 特性的标准方式，但 Firefox、Safari 和 Chrome会在每个对象上暴露 __proto__ 属性，通过这个属性可以访问对象的原型

原型层级

会按照这个属性的名称开始搜索。搜索开始于对象实例本身。如果在这个实例上发现了给定的名称，则返回该名称对应的值。如果没有找到这个属性，则搜索会沿着指针进入原型对象。

isPrototypeOf() 会在传入参数的 [[Prototype]] 指向调用它的对象时返回 true

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

getPrototypeOf() ，返回参数的内部特性[[Prototype]] 的值

hasOwnProperty() 方法用于确定某个属性是在实例上还是在原型对象上。这个方法是继承自 Object的，会在属性存在于调用它的对象实例上时返回 true

in 操作符会在可以通过对象访问指定属性时返回 true ，无论该属性是在实例上还是在原型上

列出所有实例属性，无论是否可以枚举，都可以使用 Object.getOwnPropertyNames()

3.对象迭代

静态方法Object.values() 和 Object.entries() 接收一个对象，返回它们内容的数组。

Object.values()返回对象值的数组， Object.entries() 返回键/值对的数组。

4.其他原型语法

function Person() {}
Person.prototype = {         constructor:Person, //恢复constructor此时 [[Enumerable]] 为 true 可以枚举
        name: "Nicholas",
        age: 29,
        job: "Software Engineer",
        sayName() {
                console.log(this.name);
        }
};

重写之后， Person.prototype 的 constructor 属性就不指向 Person了

重写整个原型会切断最初原型与构造函数的联系，但实例引用的仍然是最初的原型
记住，实例只有指向原型的指针，没有指向构造函数的指针

使用的是兼容 ECMAScript 的 JavaScript 引擎，改为使用 Object.defineProperty() 方法来定义 constructor 属性

Object.defineProperty(Person.prototype, "constructor", {
enumerable: false,
value: Person
});

原型上搜索值的过程是动态的，所以即使实例在修改原型之前已经存在，任何时候对原型对象所做的修改也会在实例上反映出来。

主要原因是实例与原型之间松散的联系，实例和原型之间的链接是简单的指针，不是保存的副本。

5.原型的问题

1.弱化了向构造函数传递初始化参数的能力，会导致所有实例默认都取得相同的属性值。

2.属性是在实例间共享，对函数来说比较合适，但是对于包含引用值的时候，会出现问题

let person1 = new Person();
let person2 = new Person();
person1.friends.push("Van");
console.log(person1.friends); // "Shelby,Court,Van"
console.log(person2.friends); // "Shelby,Court,Van"
console.log(person1.friends === person2.friends); // true

不同的实例应该有属于自己的属性副本。这就是实际开发中通常不单独使用原型模式的原因。

二.继承

很多面向对象语言都支持两种继承：接口继承和实现继承。
前者只继承方法签名，后者继承实际的方法。

实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。

1.原型链

每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。

如果原型是另一个类型的实例呢？

那这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。

判断原型与实例的关系两种方式

1.instanceof 操作符

原型链中出现过相应的构造函数,返回 true

console.log(instance instanceof Object); // true

2.isPrototypeOf() 方法

原型都可以调用这个方法，如下例所示，只要原型链中包含这个原型，这个方法就返回 true

console.log(Object.prototype.isPrototypeOf(instance)); // true

原型链的问题

一.主要问题出现在原型中包含引用值的时候，原型中包含的引用值会在所有实例间共享

会导致原先的实例属性变成为了原型属性。

二.子类型在实例化时不能给父类型的构造函数传参。

2.盗用构造函数

介绍：

解决原型包含引用值导致的继承问题

使用apply() 和 call() 方法以新创建的对象为上下文执行构造函数

function SuperType() {
        this.colors = ["red", "blue", "green"];
}
function SubType() {
        // 继承 SuperType
        SuperType.call(this);
}
let instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); // "red,blue,green,black"
let instance2 = new SubType();
console.log(instance2.colors); // "red,blue,green"

相当于新的 SubType 对象上运行了SuperType() 函数中的所有初始化代码。结果就是每个实例都会有自己的 colors 属性。

优点：

传递参数，可以在子类构造函数中向父类构造函数传参

function SuperType(name){
        this.name = name;
}
function SubType() {
        // 继承 SuperType 并传参
        SuperType.call(this, "Nicholas");
        // 实例属性
        this.age = 29;
}
let instance = new SubType();
console.log(instance.name); // "Nicholas";
console.log(instance.age); // 29

缺点：

1.必须在构造函数中定义方法、因此函数不能重用

2.子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。

因此盗用构造函数基本上也不能单独使用。

组合继承

综合了原型链和盗用构造函数

//添加方法
SubType.prototype.sayAge = function() {
console.log(this.age);
};

组合继承也保留了 instanceof 操作符和 isPrototypeOf() 方法识别合成对象的能力。

原型式继承

适用于：你有一个对象，想在它的基础上再创建一个新对象

Object.create() 方法

接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象（第二个可选）。 Object.create() 的第二个参数与 Object.defineProperties() 的第二个参数一样：每个新增属性都通过各自的描述符来描述。以这种方式添加的属性会遮蔽原型对象上的同名属性。

let person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
let anotherPerson = Object.create(person);

在只有一个参数时，
Object.create() 和下面的 object() 方法效果相同

function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
}

创建一个临时构造函数，将传入的对象赋值给这个构造函数的原型，然后返回这个临时类型的一个实例， object() 是对传入的对象执行了一次浅复制。

寄生式继承

创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。

function createAnother(original){
        let clone = object(original); // 通过调用函数创建一个新对象
        clone.sayHi = function() { // 以某种方式增强这个对象
                console.log("hi");
        };
        return clone; // 返回这个对象
}

这样继承了原来对象的所有属性和方法，同时增加了sayHi的方法

object() 函数不是寄生式继承所必需的，任何返回新对象的函数都可以在这里使用。

寄生式组合继承

组合继承存在效率问题。最主要的效率问题就是父类构造函数始终会被调用两次：一次在是创建子类原型时调用，另一次是在子类构造函数中调用。

function inheritPrototype(subType, superType) {
        let prototype = object(superType.prototype); // 创建对象
        prototype.constructor = subType; // 增强对象
        subType.prototype = prototype; // 赋值对象
}

第一步是创建父类原型的一个副本。然后，给返回的prototype 对象设置 constructor 属性，解决由于重写原型导致默认 constructor 丢失的问题。最后将新创建的对象赋值给子类型的原型。

1.只调用了一次 SuperType 构造函数，避免了 SubType.prototype 上不必要也用不到的属性2.instanceof 操作符和isPrototypeOf() 方法正常有效。

寄生式组合继承可以算是引用类型继承的最佳模式。

weixin_69058537

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
红宝书——8.对象、类与面向对象编程02

解决原型包含引用值导致的继承问题使用apply() 和 call() 方法以新创建的对象为上下文执行构造函数// 继承 SuperType相当于新的 SubType 对象上运行了SuperType() 函数中的所有初始化代码。结果就是每个实例都会有自己的 colors 属性。
复制链接

扫一扫