JS 类的创建继承 与 new原理实现

目录

1. 类的创建

• 工厂模式
• 构造函数模式
• 原型模式
• 组合模式

2. 类的继承

• 原型链继承
• 构造继承
• 实例继承
• 拷贝继承
• 组合继承
• 寄生组合继承

3. new 的原理实现

学习和参考于：

JS定义类的六种方式详解

JS实现继承的几种方式

JavaScript深入之创建对象的多种方式以及优缺点

js new一个对象的过程，实现一个简单的new方法

（一）类的创建

1. 工厂模式

function createPerson(name){
   
    //原料:
    var obj=new Object();
    //加工:
    obj.name=name;
    obj.showName=function(){
   
    alert(this.name);
    }
    //出场:
    return obj;
}

var p1=createPerson('小米');
p1.showName();

var arr=new Array();//生成一个系统数组对象

与系统对象的区别：

• 系统对象是直接用new在外面生成，而工厂定义的是在函数内部生成

• 工厂定义的函数名称第一个是小写开头，而系统定义的是大写开头

工厂模式的优缺点：

• 缺点：对象无法识别，因为所有的实例都指向一个原型

2. 构造函数模式

function Car(color,door){
   
    this.color = color;
    this.doors = door;
    this.showColor = function(){
   
    alert(this.color)
    };
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);

构造函数模式的优缺点：

• 优点：实例可以识别为一个特定的类型

• 缺点：每次创建实例时，每个方法都要被创建一次

构造函数模式优化：

function Person(name) {
   
    this.name = name;
    this.getName = getName;
}

function getName() {
   
    console.log(this.name);
}

var person1 = new Person('kevin');

优点：解决了每个方法都要被重新创建的问题

3. 原型模式

该方式利用了对象的prototype属性。首先用空函数创建类名，然后所有的属性和方法都被赋予prototype属性。

function Car(){
   
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
   
alert(this.color);
}
var car1 = new Car();
var car2 = new Car()