原型和原型链

例子

    // 父类
    class Person {
      constructor(name) {
        this.name = name;
      };
      sleep() {
        console.log(`${this.name}睡觉了`);
      };
    };

    // 子类
    class Student extends Person { // 继承父类的属性和方法
      constructor(name, subject) {
        super(name);  // 调用父类的构造函数
        this.subject = subject;
      };
      study() {
        console.log(`${this.name}在学习${this.subject}`);
      };
    };

    // 创建 Student 的实例
    let zs= new Student('张三', '数学');

    console.log(zs);
    console.log(zs.name);
    console.log(zs.subject);
    zs.study();
    zs.sleep();

    // 打印对象的属性和方法
    console.dir(Student);
    
    console.log(zs.__proto__ === Student.prototype); // true

    console.log(zs instanceof Student); // true

    console.log(zs.hasOwnProperty('name')); // true

    // 获取原型
    console.log(zs.__proto__);
    console.log(zs.constructor.prototype);
    console.log(Object.getPrototypeOf(zs));

Student 的实例 console.log(zs); Student 的属性和方法 console.dir(Student);

原型、构造函数、实例、原型链的关系

原型、构造函数、实例、原型链的关系

原型

• Student.prototype 就是原型，它是一个对象，我们也称它为原型对象
• 原型的作用，给函数和对象添加可共享（继承）的方法、属性
• 获取原型的方法 zs.__proto__、zs.constructor.prototype、Object.getPrototypeOf(zs)

隐式原型

• 引用类型都有一个隐式原型 __proto__ 属性，属性值是一个普通的对象
• 引用类型隐式原型 zs.__proto__ 的属性值指向它的构造函数的显式原型 Student.prototype 属性值

原型链

• 调用某个对象的属性或方法时，如果这个对象本身没有这个属性或方法，那么它会去它的隐式原型
  __proto__ 找，原型与原型层层相链接的过程即为原型链
• Object.prototype 的隐式原型指向 null

__proto__ 和 prototype 的区别和联系

• 所有对象都有 __proto__ 属性，函数这个特殊对象除了具有 __proto__ 属性，还有特有的原型属性 prototype。prototype 对象默认有两个属性，constructor 属性和 __proto__ 属性
• prototype 属性可以给函数和对象添加可共享（继承）的方法、属性，而 __proto__ 是查找某函数或对象的原型链方式
• constructor 这个属性包含了一个指针，指回原构造函数

instanceof

• 检查 zs 是否是 Student 的实例

Object.setPrototypeOf(obj, prototype)

• 设置一个指定的对象的原型到另一个对象或 null
• obj 要设置其原型的对象
• prototype 该对象的新原型(一个对象或 null)

    let parent = {
      name: 'parent',
      show() {
        console.log(this.name)
      }
    }
    let son = {
      name: 'son'
    }

    Object.setPrototypeOf(son, parent)
    son.show()  // son

Object.getPrototypeOf(object)

• 返回指定对象的原型
• object 要返回其原型的对象

    let obj1 = {}
    let obj2 = {}
    console.log(Object.getPrototypeOf(obj1) === Object.getPrototypeOf(obj2)) // true

Object.create()

• 创建一个新对象，使用现有的对象来提供新创建的对象的 __proto__

    let obj = {
      num: 20
    }
    let obj1 = Object.create(obj, {
      name: {
        value: '张三'
      }
    })
    console.log(obj1)
    console.log(obj1.num) // 20

    // 创建没有原型的对象
    let obj2 = Object.create(null, {
      name: {
        value: '张三'
      }
    })
    console.log(obj2) // {name: "张三"}

parentObject.isPrototypeOf(sonObject)

• sonObject 对象是否在 parentObject 对象的原型链上，返回一个布尔值

    let parent = {
      name: 'parent'
    }
    let son = {
      name: 'son'
    }

    Object.setPrototypeOf(son, parent)
    console.log(parent.isPrototypeOf(son)) // true

Object.prototype.hasOwnProperty(prop)

• 返回一个布尔值，指示对象自身属性中是否具有指定的属性
• prop 要检测的属性的 String 字符串形式表示的名称，或者 Symbol

    let obj1 = {
      age: 20
    }
    let obj2 = {
      age: 10,
      name: '张三'
    }
    Object.setPrototypeOf(obj1, obj2)
    console.log(obj1)
    console.log(obj1.age) // 20
    console.log(obj1.hasOwnProperty("age"))  // true
    console.log(obj1.hasOwnProperty("name"))   // false
    console.log("=========================")

    for (const key in obj1) {
      // console.log(key) // age name
      if (Object.hasOwnProperty.call(obj1, key)) {
        console.log(key)  //  age
      }
    }

Object.assign(target, ...sources)

• 将所有可枚举属性的值从一个或多个源对象分配到目标对象，它将返回目标对象
• target 目标对象
• sources 源对象（选填）

    const target = { a: 1, b: 2 };
    const source1 = { b: 4, c: 5 };
    const source2 = { d: 8, e: 9 };

    const returnedTarget = Object.assign(target, source1, source2);

    console.log(target);  // {a: 1, b: 4, c: 5, d: 8, e: 9}

    console.log(returnedTarget);  // {a: 1, b: 4, c: 5, d: 8, e: 9}