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.attr
function 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;
           }
        }

5.使用参数可变的封装函数extend(需要自己实现)实现多个类的按顺序继承extend(A,B,C)的链式继承,B节点继承A,C继承B(实际上还是链式方式,但是封装了好理解,是知乎大佬晓宏和csdn大佬浴盆的答案,https://blog.csdn.net/sysuzhyupeng/article/details/54846949知乎那个写法不容易理解)。主要还是利用类可以为函数并可作为返回值的特性

所以,正常情况下:创建类用class或者构造函数+原型的方式;继承类用class...extends...或者call方法。了解工厂方法和伪装继承。

重载就不细究了,和class一样不完善,只能自己用augments.length去实现。

到此这篇关于Js类的构建与继承案例详解的文章就介绍到这了,更多相关Js类的构建与继承内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-12

js继承的6种方式详解

原型链继承 原型链继承是ECMAScript的主要继承方式.其基本思想就是通过原型继承多个引用类型的属性和方法.什么是原型链?每个构造函数都会有一个原型对象,调用构造函数创建的实例会有一个指针__proto__指向原型对象,这个原型可能是另一个类型的实例,所以内部可能也有一个指针指向另一个原型,然后就这样形成了一条原型链. 代码: function SuperType() { this.property = true; } SuperType.prototype.getSuperValue =

简单谈谈JavaScript寄生式组合继承

组合继承 组合继承也被称为伪经典继承,它综合了我们昨天说的原型链和盗用构造函数,将俩者的有点结合在了一起.它的基本思想是使用原型链继承原型上的属性和方法,通过盗用构造函数继承实例属性,这样的好处就是可以把方法定义在原型上复用,每个实例又有自己的属性. function SuperType (name) { this.name = name; this.colors = ["red","yellow","bule"]; } SuperType.pr

对于JavaScript继承你到底了解多少

目录 前言 构造函数,原型对象,实例对象三者之间的关系 原型链继承 借⽤构造函数继承 原型式继承 寄生式继承 组合继承(组合原型链继承和借用构造函数继承) 寄生组合式继承 总结 前言 关于继承,你到底了解多少,什么样的继承是最最优的,让我们一起来学习一些关于继承的那些知识点,带你了解他们的实现过程,以及他们的优缺点 构造函数,原型对象,实例对象三者之间的关系 先来了解他们的关系有助于对继承更好的理解 原型链继承 核⼼:将⽗类实例作为⼦类原型 代码实现过程: function Parent(nam

原生Javascript实现继承方式及其优缺点详解

目录 前言 原型继承 优点 构造函数继承 优点 缺点 组合式继承 寄生式组合继承 总结 前言 最近在复习javascript的一些基础知识,为开启新的征程做准备.所以开始记录一些自己学习的内容. 那今天的主题是 js的原生继承方式 废话少说,上代码! 首先是我们的父类代码. 在这里我们创建一个Person的类作为父类,它的构造函数需要2个参数name和age. 然后我们在它的原型上添加一个sayHi的方法. //父类 function Person (name, age) { this.name

Javascript继承(上)——对象构建介绍

Javascript中存在"类"么? 万物皆对象 Javascript中除了基本数据(Undefined.Null.Boolean.Number.String),其他都是对象(Object). 实际上,Javascript中的对象是数据与功能的集合.例如我们知道: 复制代码 代码如下: var foo = new Function("alert('hello world!')"); foo(); 可见foo是一个函数,也是一种对象.再比如说: 复制代码 代码如下:

JavaScript中的对象序列化介绍

与Java语言一样,JavaScript中可以对对象进行序列化和反序列化,藉此对对象进行保存.ECMAScript 5标准中,JavaScript中的对象序列化是通过JSON.stringify()来实现的,而反序列化则通过JSON.parse()来实现: 复制代码 代码如下: var o = {x:1, y:29, z:42}; var s = JSON.stringify(o); console.log(s);//{"x":1,"y":29,"z&qu

javascript中[]和{}对象使用介绍

复制代码 代码如下: var a=["apple","peach","banala"]; 上述是一个数组的另一种定义方式,它相当于 复制代码 代码如下: var a=new Array(); a.push("apple"); a.push("peach"); a.push("banala"); 复制代码 代码如下: var b={a:"apple",p:"p

浅析2种JavaScript继承方式

js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式. 1.原型(prototype): function Body(name,age){// 创建一个Body类 this.name = name;// 赋予基础属性name.age this.age = age; } Body.prototype.sayName =function() {// 给原型定义一个sayName的方法 console.log(this.name); } var a = n

JavaScript中的对象继承关系

我们今天就来看一下继承中的类继承以及类继承和原型继承的混用,所谓类继承,就是使用call或者apply方法来进行冒充继承: function Desk(size,height){ this.size=size; this.height=height; } function MJDesk(size,height){ Desk.call(this,size,height);//这种就叫类继承. } var mj = new MJDesk(10,123); 像上面这种就是我们要使用的类继承,用这种继承

史上最为详细的javascript继承(推荐)

前言 为大家分享js中最常见最详细的继承方式,接下来将一下面的几个维度进行展示说明 文章有点长,请耐心阅读

浅谈Javascript中的对象和继承

Javascript是一门函数式编程语言,Javascript当中函数是核心,在Javascript中函数也是对象,函数对象在创建的时候会被添加属性和方法. 在Javascript中函数对象有两种调用方式,一种是new关键字的调用,另一种是没有new关键字的调用,前者会返回一个对象,后者会返回return语句中的内容. function Obj (name) { this.name = name; return name; } 用new关键字来调用如下: var obj = new Obj('张

javascript 内置对象及常见API详细介绍

一. 类与对象 在 JavaScript世界里,关于面向对象第一个要澄清的概念就是类.对象都是由类来定义的,通过类来创建对象就是我们所熟悉的实例化.然而,在 JavaScript中别没有真正的类,对象的定义就是对象自身.而 ECMA-262 干脆把这种妥协的方式称作为对象的调和剂.为了方便理解,我通常把这个发挥类的作用的调和剂称为类. Javascript内置对象学习 全局属性 Infinity 表示正无穷大的数值 NaN 非数字值 undefined 未定义的值 decodeURI() 对en

js预载入和JavaScript Image()对象使用介绍

预载入和JavaScript Image()对象 很多high-res图像真的可以使 Web 站点更加整洁.但是它们也会使站点的访问速度变慢--图像是文件,文件使用带宽,带宽直接与等待时间相关.是该了解如何通过一个叫做图像预载入(preloading)的技巧来提高 Web 站点的访问速度的时候了. 图像预载入 对于浏览器载入图像来说,只有在对图像发送一个 HTTP请求之后,它们才会被浏览器载入,对图像的 HTTP 请求要么使用 <img> 标记,要么通过方法调用实现.如果使用 JavaScri

JavaScript返回上一页的三种方法及区别介绍

JavaScript返回上一页代码区别: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:window.history.back();location.reload(); window.location.go(-1); //刷新上一页