JS基础 原型与继承

阅读目录

• 原型基础
• • 原型对象
  • • 使用数组原型对象的 concat 方法完成连接操作
    • 默认情况下创建的对象都有原型。
    • 以下 x、y 的原型都为元对象 Object，即JS中的根对象
    • 创建一个极简对象（纯数据字典对象）没有原型（原型为 `null`)
    • 函数拥有多个原型，prototype 用于实例对象使用，`__proto__` 用于函数对象使用
    • 原型关系分析，与方法继承的示例
    • 使用构造函数创建对象的原型体现
    • `constructor` 存在于 `prototype` 原型中，用于指向构建函数的引用。
    • 使用对象的 `constructor` 创建对象
  • 原型链
  • 原型检测
  • 属性遍历
  • 借用原型 *
  • this 不受原型继承影响
• 原型总结
• • prototype
  • Object.create
  • `__proto__`
  • 使用建议
• 构造函数
• • 原型属性
  • constructor
  • 使用优化
  • • 通过原型定义方法不会产生函数复制
    • 演示使用原型为多个实例共享属性
  • 体验继承
• 继承与多态
• • 继承实现
  • 构造函数
  • 方法重写
  • 多态
• 深挖继承
• • 构造函数
  • 原型工厂
  • 对象工厂 *
  • Mixin模式
  • 实例操作

原型基础

原型对象

每个对象都有一个原型 prototype 对象，通过函数创建的对象也将拥有这个原型对象。
原型是一个指向对象的指针。

1. 可以将原型理解为对象的父亲，对象从原型对象继承来属性
2. 原型就是对象除了是某个对象的父母外没有什么特别之处
3. 所有函数的原型默认是 Object 的实例，所以可以使用 toString / toValues / isPrototypeOf等方法的原因。
4. 使用原型对象为多个对象共享属性或方法
5. 如果对象本身不存在属性或方法将到原型上查找
6. 使用原型可以解决，通过构建函数创建对象时复制多个函数造成的内存占用问题
7. 原型包含 constructor 属性，指向构造函数
8. 对象包含 __proto__ 指向他的原型对象

使用数组原型对象的 concat 方法完成连接操作

下例使用的就是数组原型对象的 concat 方法完成的连接操作。

let hd = ["a"];
console.log(hd.concat("b"));
console.log(hd);

默认情况下创建的对象都有原型。

let hd = { name: "wgchen" };
console.log(hd);

以下 x、y 的原型都为元对象 Object，即JS中的根对象

let x = {};
let y = {};
console.log(Object.getPrototypeOf(x) == Object.getPrototypeOf(y)); //true
// Object.getPrototypeOf（）方法返回指定对象的原型（即内部属性的值）。[[Prototype]]

创建一个极简对象（纯数据字典对象）没有原型（原型为 null)

我们也可以创建一个极简对象（纯数据字典对象）没有原型（原型为 null)

// hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

let hd = { name: 3 };
console.log(hd.hasOwnProperty("name")); // true

let xj = Object.create(null, {
  name: {
    value: "wgchen"
  }
});

console.log(xj.hasOwnProperty("name"));
// Uncaught TypeError: xj.hasOwnProperty is not a function

//Object.keys是静态方法，不是原型方法所以是可以使用的
console.log(Object.keys(xj));


console.log(xj);

函数拥有多个原型，prototype 用于实例对象使用，__proto__ 用于函数对象使用

function User() {}

User.__proto__.view = function() {
  console.log("User function view method");
};

User.view();

User.prototype.show = function() {
  console.log("wgchen");
};

let hd = new User();
hd.show();

console.log(User.prototype == hd.__proto__);

原型关系分析，与方法继承的示例

let hd = new Object();
hd.name = "wgchen";

Object.prototype.show = function() {
  console.log("blog");
};
hd.show();

function User() {}
let xj = new User();
xj.show();

User.show();

使用构造函数创建对象的原型体现

1. 构造函数拥有原型
2. 创建对象时构造函数把原型赋予对象

function User() {}
let xj = new User();
console.log(xj.__proto__ == User.prototype); // true

下面使用数组会产生多级继承即原型链

let hd = [];
console.log(hd);
console.log(hd.__proto__ == Array.prototype);

let str = "";
console.log(str.__proto__ == String.prototype);

下面使用 setPrototypeOf 与 getPrototypeOf 获取与设置原型

let hd = {};
let parent = { name: "parent" };
Object.setPrototypeOf(hd, parent);

console.log(hd);
console.log(Object.getPrototypeOf(hd));

使用自定义构造函数创建的对象的原型体现

function User() {}
let hd = new User();
console.log(hd);

constructor 存在于 prototype 原型中，用于指向构建函数的引用。

function hd() {
  this.show = function() {
    return "show method";
  };
}

const obj = new hd(); 
console.log(obj instanceof hd); //true

const obj2 = new obj.constructor();
console.dir(obj2.show()); //show method

使用对象的 constructor 创建对象

f