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类的构建与继承内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

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

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

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

  • js继承的6种方式详解

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

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

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

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

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

  • 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.__

  • Java 内置Http Server构建web应用案例详解

    一.概述 使用Java技术构建Web应用时, 我们通常离不开tomcat和jetty之类的servlet容器,这些Web服务器功能强大,性能强劲,深受欢迎,是运行大型Web应用的必备神器. 虽然Java的设计初衷就是用来开发大型应用的,然而有时候我们开发的程序只是简单的小型应用,对于功能的需求和性能的要求并不高, 可能仅仅就几百行甚至几十行代码,这个时候使用tomcat之类的Web服务器去运行就显得有点大材小用了. 比如说只是将数据库中的数据读出来转换成JSON,以Web服务的形式吐给调用方这样

  • JS高级程序设计之class继承重点详解

    目录 引言 写法 constructor 特性 继承 题外话 引言 前文已提过:在 class 出现之前,JavaScript 实现继承是件麻烦事,构造函数继承有加上原型上的函数不能复用的问题:原型链继承又存在引用值属性的修改不独立的问题:组合继承又存在两次调用构造函数的问题,寄生组合继承,写起来又太麻烦了,总之,在 class 出现前,JavaScipt 实现继承真是件麻烦事儿. 然而,class 的出现真的改变这一现状了吗? 不如往下看. 写法 与函数类型相似,定义类也有两种主要方式:类声明

  • Java Stopwatch类,性能与时间计时器案例详解

    在研究性能的时候,完全可以使用Stopwatch计时器计算一项技术的效率.但是有时想知道某想技术的性能的时候,又常常想不起可以运用Stopwatch这个东西,太可悲了. 属性: Elapsed 获取当前实例测量得出的总运行时间. ElapsedMilliseconds  获取当前实例测量得出的总运行时间(以毫秒为单位). ElapsedTicks  获取当前实例测量得出的总运行时间(用计时器计时周期表示). IsRunning   获取一个指示 Stopwatch 计时器是否在运行的值. 方法

  • BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

  • JS实现的贪吃蛇游戏案例详解

    本文实例讲述了JS实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: github项目地址:https://github.com/LEERTRT/Snake 在<script></script>中,文档加载完毕后调用: $(function () { var game = new Game("canvas"); game.init(); }); 其中构造函数Game()接收canvas的id作为参数,实例化对象以后,调用init()函数,init()函数里面有三

  • C++ QgraphicsScene类案例详解

    概述 QgraphicsScene类为管理大量的2D图形item提供了一个管理界面,做为item的容器,它配合使用QgraphicsView使用来观察items,例如线,矩形,文本或者自定义的items, QgraphicsScene提供了方便的函数来让你高效的找到items的位置,或者决定在scene上哪个item可以看到,配合QgraphicsView窗口,你可以让可见scene,或者缩放场景来可见一部分 例如: QGraphicsScene scene; scene.addText("He

  • vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • Java基础之枚举Enum类案例详解

    一.文章序言 Java中引用类型:数组.类.接口.枚举.注解 枚举这个既熟悉又陌生的东西具体再哪里可以使用呢? 什么是枚举? 枚举是一个引用类型,枚举就是一个规定了取值范围的变量类型. 枚举变量不能使用其他的数据,只能使用枚举中常量赋值.提高程序安全性: //格式: public enum 枚举名{ //枚举的取值范围 //枚举中可以生命方法 } 枚举的使用场景介绍? 1.最常见的情况如星期,相关变量我们会在Java里面重复使用,在这里我们就可以来定义一个叫做"星期"的枚举. publ

  • C# MemoryStream类案例详解

    MemoryStream位于System.IO命名空间,为系统内存提供流式的读写操作.常作为其他流数据交换时的中间对象操作. MemoryStream类封装一个字节数组,在构造实例时可以使用一个字节数组作为参数,但是数组的长度无法调整.使用默认无参数构造函数创建实例,可以使用Write方法写入,随着字节数据的写入,数组的大小自动调整. 在对MemoryStream类中数据流进行读取时,可以使用seek方法定位读取器的当前的位置,可以通过指定长度的数组一次性读取指定长度的数据.ReadByte方法

随机推荐