Skip to content

对象高级

原型链总结

① 原型和构造函数

js
1. 构造函数.prototype 可以获取到该构造函数实例的原型
2. 构造函数相同的对象,原型也相同

__proto__ 和 prototype 属性

js
1. 函数类型的对象
   __proto__ : 获取的是自己的原型  
   prototype: 获取的该构造函数的实例的原型

2. 其他类型的对象
   __proto__: 获取的是自己的原型
   没有 prototype 属性

③ construct 属性

js
本身具有constructor属性的对象,会作为其他对象的原型,constructor的值就是其他对象的构造函数
sh
construct在哪里设置:给[别人]当原型的对象上设置。=== [构造函数].prototype
construct的值:是[别人]的构造函数 [构造函数].prototype.construct === [构造函数]

④ 原型链

js
// 自定义的构造函数
function Foo() {}

// Foo 的两个实例
var f1 = new Foo();
var f2 = new Foo();

// Object的两个实例
var o1 = {};
var o2 = {};
js
f1、f2 -> Foo.prototype -> Object.prototype
o1、o2 -> Object.prototype
Foo、Object、Function -> Function.prototype -> Object.prototype

特殊现象(不是规则,不要记,要理解)

js
1. Object 的原型是 Function.prototype, Function.prototype 的构造函数是 Object
2. Function 的构造函数是 Function, 所以 Function.prototype === Function.__proto__

image-20240318135415221

面向对象继承

① 面向对象编程语言的继承规则

php
// 父类(对应的就是js中的构造函数)
class Foo{
    private name;
    private age;
    public getInfo() {}
}

// 子类
class Product extends Foo {
    private address;
}

// 子类
class Shopcart extends Foo {
    
}

② JS 中继承关系的特点(原型继承特点)

js
1. 对象可以继承它的原型上的属性
2. 对象的构造函数、它的原型的构造函数也可以描述成子类、父类的关系
js
1. 对象a的原型是对象b, 对象a的构造函数是子类,对象b的构造函数是父类
   子类的实例以父类的实例为原型
2. 一个对象只能有一个原型,原型可以作为多个对象的原型
   一个父类可以有多个子类, 一个子类只能有一个父类
js
// 数组  构造函数是 Array
var arr = [];
// 原型链: arr(对象a) -> Array.prototype(对象b) -> Object.prototype
// 构造函数 Array  Object
// Array 是子类 Object 是父类


// 字符串对象 构造函数是 String
var msg = new String();
// 原型链:  msg -> String.prototype -> Object.prototype
// 构造函数: String Object
// String 是子类 Object 是父类

③ 实现JS中构造函数和构造函数之间继承(子类 父类)

原理:与系统的规则统一起来

js
1. 设置子类的实例的原型是父类的一个实例
2. 设置子类的实例的原型的 constructor 属性的值是子类
js
function A(){}
function B(){}

// B作为子类 A作为父类 
// 设置B的实例的原型是 A的一个实例 
// B的实例的构造函数是B 
B.prototype = new A();
// 设置 B.prptotype 的 constructor 属性,值是B这个构造函数。
B.prototype.constructor = B;
js
Array是子类 Object是父类
1. Array的实例的原型 是Object的一个实例
2. Array.prototype.constructor 是 Array

实现:

属性写在构造函数中,方法写在实例的原型的方法上。[构造函数].prototyle.[方法名]

js
 // 定义商品类 
function Product(price, nums) {
    // 给实例设置属性
    this.price = price;;
    this.nums = nums;
}
Product.prototype.discount = function(num) {
    this.price *= num;
};
Product.prototype.buy = function() {
    this.nums -= 1;
}

// 汽车类商品
function CarProduct(price, nums, speed) {
    // this.price = price;
    // this.nums = nums;
    // 将父类规定的属性添加到了 CarProduct 的实例上
    //this的值是CarProduct New出来的的实例
    //call 第二个参数开始后面的参数都是给所调用的函数Product使用的,
    //把实例的(price, nums)赋值给Product this赋值。
    
    Product.call(this, price, nums); 
    this.speed = speed;
}   
// 设置  CarProduct 的实例的原型是 Product 的一个实例
CarProduct.prototype = new Product();
// 设置 CarProduct 的实例的的原型的 constructor 属性的值是  CarProduct
CarProduct.prototype.constructor = CarProduct;
// 设置方法
// 属性写在构造函数中,方法写在实例的原型的方法上写作`[构造函数].prototyle.[方法名]`
CarProduct.prototype.driver = function() {
    console.log('这辆车可以被驾驶!');
}

image-20240318172025678