Js中类构建与继承的示例分析

这篇文章将为大家详细讲解有关Js中类构建与继承的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

定义

派生于Object的方式

1.new Object:在创建对象后动态定义属性、方法var Car = new Object;Car.color = "red";Car.showColor = function(){        console.log(this.color);}//想要继承就要先构造空对象然后用__proto__原型链来继承var Car1 = new Object; //或者 = {}Car1.__proto__ =  Car;

使用函数构造

1.工厂函数：在函数内生成类,好处是不用再构造空对象+继承原型链，直接返回一个对象的复制，类似于构造函数function createCar(){ //也可以为此函数传递参数creatCar(color)        let car = new Object;        car.color = "red"; //传递参数：car.color = color        car.showColor = function(){                console.log(this.color);        }        return car;}var newCar = createCar(); //传递参数：createCar("red")//但是使用工厂函数，每构造一个函数就会构建一次showColor方法，很不划算//所以可以在类的工厂函数之前为所有类统一确定一个用于继承的方法function showColor(){        console.log(this.color);}function createCar(){...        car.showColor = showColor;...}2.构造函数方法:类似于工厂函数方法，使用构造函数方法。不同的是构造函数内属性只能为this.attrfunction Car(color,num){        this.color = color;        this.num = num;        this.showColor = function(){                console.log(this.color);        }        this.drivers = new Array("mike");}var car1 = new Car("red",1); //注意，此时Car本身的属性和方法不能被访问，只能实例化之                                           后访问                                         //比如:console.log(new Car("red",1).color)                                         //这表示，构造函数真的是类似类的构造函数而非实例化对象，js也                                    //有传统意义的对象而不是只有函数对象//和方式1一样Car的类内函数showColor将在每次构造时被构造出来，占据了没必要的空间var car2 = new Car("green",1);car1.drivers.push("kiki");console.log(car2.drivers); //不存在引用同一个数组的现象3.原型方法:类似于Object派生，形成基于Object的原型链，再绑定方法和属性function Car(){};Car.prototype.color = "red";Car.prototype.showColor = function(){                console.log(this.color);}//Car.prototyoe = { //把多个绑定的函数放进一个匿名的类来写//      mathod1:function(){...};//      mathod2:function(){...};//}Car.prototype.drivers = new Array("mike","jhon");var car1 = new Car(); //一定要创建实例才能调用方法访问属性var car2 = new Car();car1.drivers.push("bill");console.log(car1.color);console.log(car2.drivers);//这样绑定arry的属性全部都指向同一个数组对象，属于引用。当改变一个实例的color，所有的color都一起变了

混合方法：

1.构造函数+原型：构造函数内只构造属性和类内数组，而用原型的方式声明类内函数function Car(color){        this.color = color;        this.drivers = new Array("mike");}Car.prototype.showColor = function(){        console.log(this.color);}var car1 = new Car(); //一定要创建实例才能调用方法访问属性var car2 = new Car();car1.drivers.push("bill");console.log(car2.drivers); //避免了原型方法的缺点2.使用class关键字定义类：不能在类外直接定义属性，仍需要使用prototype方法在类外绑定函数对象。class Car{           constructor(color) {                this.color = color;           }           drivers = new Array("mike","jhon");           hello = function(){                         return "Di Di"+ this.color;            }                   }Car.prototype.hello = function (){ //类外绑定方法            return "Di Di";}var car1 = new Car("red");var car2 = new Car("green");car1.drivers.push("kiki");console.log(car1.color);console.log(car2.hello());

综上，当在类内定义变量时，在构造实例时会随之一起调用构造函数进行构造，而类外绑定的方法、属性将会是一种引用的形式不参与构造直接调用。同时，也便于保密，隐藏信息。

继承

1.伪装继承：把类作为新类的构造函数来继承，有点神奇，js里类可以当成函数对象的奇特属性function Car1(color){        this.color = color;        this.showColor = function(){                console.log("this car is "+this.color);        }        this.drivers = new Array("mike");}function Car2(){        this.makeSound = function(){                console.log("Di Di");        }}function Car3(color){        this.newConstruct = Car1; //作为构造函数传入        this.newConstruct(color); //调用构造函数        delete this.newConstruct;        this.newConstruct2 = Car2; //多重继承，但是由于闭包机制，要用不同的构造函数名        this.newConstruct2();         delete this.newConstruct2;}//同样，伪装继承也可以用.prototype来绑定构造函数var car1 = new Car3("red");var car2 = new Car3("green");car1.drivers.push("kiki");console.log(car1.color);car1.showColor();car1.makeSound();console.log(car2.drivers);2.用父类的方法call和apply进行继承function Car1(color){        this.color = color;        this.showColor = function(){                console.log("this car is"+this.color);        }}function Car2(num){        this.num = num;        this.makeSound = function(){                console.log("Di Di");        }}function Car3(color,num){        Car1.call(this, color);        Car2.apply(this, augments);//augments为一个数组，包含所需的参数}var car1 = new Car3("red",1);var car2 = new Car3("green",2);console.log(car1.color);console.log(car2.num);car1.showColor();car1.makeSound();//也可以把.apply和.call写在类外,但只能对实例进行操作，不能用于构成类3.用原型链进行继承：使用__proto__和.prototype构成原型链，缺点是不能实现多重继承，只能通过绑定成构造函数或者再创造几个类用链式方式继承来来实现多重继承function Car1(color){        this.color = color;        this.showColor = function(){                console.log("this car is"+this.color);        }}function Car3(){};Car3.prototype = new Car1();4.用class...extends...，也可以实现继承，但是不能实现多重继承，也只能像原型链一样用多个类作为节点的方式来实现多重继承，属于是ES6的特性了。ES6还引入了let、public、private、protected关键字但是不能实现多重继承，也没有什么包的概念也是挺奇葩的class Car2 extends Car1{           constructor(color) {                super(); //类似java，super本身可以代表父类，此处是用了代表父类的                                 //构造函数                this.color = color;           }           drivers = new Array("mike","jhon");           hello = function(){                         return "Di Di"+ this.color;            }          }

关于"Js中类构建与继承的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。