JavaScript类与继承

最新推荐文章于 2024-07-26 09:48:00 发布
最新推荐文章于 2024-07-26 09:48:00 发布
阅读量520 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript es6/es7 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35241223/article/details/118440037
版权

JS类与继承

前言

在ES6中出现了class与extends关键字，使js做类与继承容易了很多，但是在ES6之前如何实现类与继承是理解js重要的一部分。本篇文章将介绍ES6的类、继承与ES6之前的类、继承的写法，一篇文章介绍所有内容。

类

下面定义的类全部为Person类，Person类有age与name两个属性，sayName与sayAge两个方法。

ES5定义类

伴随着JS的发展，定义类的方式共有7种，最后2种除特殊场景外不推荐：

  1. 工厂模式
  2. 构造函数模式
  3. 原型模式
  4. 组合使用构造函数模式与原型模式（最常用）
  5. 动态原型模式
  6. 寄生构造函数模式（特殊场景）
  7. 稳妥构造函数模式（特殊场景）

接下来说明各种方式如何定义类，以及缺点。

工厂模式

示例代码如下：

function createPerson(name, age){
	let tempPerson = new Object();
	
	tempPerson.name = name;
	tempPerson.age = age;
	
	tempPerson.sayName = function(){
		console.log(`My name is ${this.name}`);
	}
	tempPerson.sayAge = function(){
		console.log(`My age is ${this.age}`);
	}
	return tempPerson;
}
const person1 = createPerson('小刘先森', 26);
person1.sayName(); // 输出：My name is 小刘先森
person1.sayAge(); // 输出： My age is 26

const person2 = createPerson('小刘儿', 26);
person2.sayName(); // 输出：My name is 小刘儿
person2.sayAge(); // 输出： My age is 26

缺点：没有解决对象识别的问题，即怎么样知道一个对象的类型

构造函数模式

示例代码如下：

function Person(name, age){
	this.name = name;
	this.age = age;
	this.sayName = function(){
		console.log(`My name is ${this.name}`);
	}
	this.sayAge = function(){
		console.log(`My age is ${this.age}`);
	}
}
const person1 = new Person('小刘先森', 26) // 名字与年龄均为本作者 哈哈
person1.sayName(); // 输出：My name is 小刘先森
person1.sayAge(); // 输出： My age is 26

const person2 = new Person('小刘儿', 26)
person2.sayName(); // 输出：My name is 小刘儿
person2.sayAge(); // 输出： My age is 26

缺点：每个实例都会有一份没必要的方法副本，即person1.sayName !== person2.sayName

原型模式

示例代码如下：

function Person(){
}
Person.prototype.name = '小刘先森';
Person.prototype.age = '26';
Person.prototype.sayName = function(){
	console.log(`My name is ${this.name}`);
}
Person.prototype.sayAge = function(){
	console.log(`My age is ${this.age}`);
}
const person1 = new Person('小刘先森', 26) // 名字与年龄均为本作者 哈哈
person1.sayName(); // 输出：My name is 小刘先森
person1.sayAge(); // 输出： My age is 26

const person2 = new Person('小刘儿', 26)
person2.sayName(); // 输出：My name is 小刘儿
person2.sayAge(); // 输出： My age is 26

缺点：缺点很明显，属性全部写在了prototype上，并且为固定值，无论实例化几个类都会输出一样的值。

组合使用构造函数模式与原型模式（最常用）

示例代码如下：

function Person(name, age){
	this.name = name;
	this.age = age;
}
Person.prototype.sayName = function(){
	console.log(`My name is ${this.name}`);
}
Person.prototype.sayAge = function(){
	console.log(`My age is ${this.age}`);
}
const person1 = new Person('小刘先森', 26) // 名字与年龄均为本作者 哈哈
person1.sayName(); // 输出：My name is 小刘先森
person1.sayAge(); // 输出： My age is 26

const person2 = new Person('小刘儿', 26)
person2.sayName(); // 输出：My name is 小刘儿
person2.sayAge(); // 输出： My age is 26

这是最常用的自定义类的方式，每个实例都会有一份自己的实例属性副本，同时又共享着对方法的引用。

动态原型模式

示例代码如下：

function Person(name, age){
	// 属性
	this.name = name;
	this.age = age;
	
	// 方法
	if( typeof this.sayName !== 'function'){
		Person.prototype.sayName = function(){
			console.log(`My name is ${this.name}`);
		}
		Person.prototype.sayAge = function(){
			console.log(`My age is ${this.age}`);
		}
	}
}
const person1 = new Person('小刘先森', 26) // 名字与年龄均为本作者 哈哈
person1.sayName(); // 输出：My name is 小刘先森
person1.sayAge(); // 输出： My age is 26

const person2 = new Person('小刘儿', 26)
person2.sayName(); // 输出：My name is 小刘儿
person2.sayAge(); // 输出： My age is 26

其中方法定义的部分，判断sayName是否已经存在，不存在再去定义，if语句中的代码只会在初次实例化时执行，也同样达到了类的定义方式，但是却没有原型与构造函数组合方式代码简洁，不推荐使用。

缺点：不能使用对象字面量方式重写原型，如果在已经创建了实例的情况下重写原型，那么就会切断现有实例与新原型之间的联系

寄生构造函数模式

示例代码如下：

function Person(name, age){
	let tempPerson = new Object();
	
	tempPerson.name = name;
	tempPerson.age = age;
	
	tempPerson.sayName = function(){
		console.log(`My name is ${this.name}`);
	}
	tempPerson.sayAge = function(){
		console.log(`My age is ${this.age}`);
	}
	return tempPerson;
}
const person1 = new Person('小刘先森', 26);
person1.sayName(); // 输出：My name is 小刘先森
person1.sayAge(); // 输出： My age is 26

const person2 = new Person('小刘儿', 26);
person2.sayName(); // 输出：My name is 小刘儿
person2.sayAge(); // 输出： My age is 26

这种模式除了在实例化时使用new操作符，其余的与工厂模式完全相同。这种模式可以在特殊场景下为对象创建构造函数。

场景：创建一个具有额外方法的数组，由于不能修改Array的构造函数，可以使用该模式

function SpecialArray(){
 //创建数组
 var values = new Array();
 //添加值
 values.push.apply(values, arguments);
 //添加方法
 values.toPipedString = function(){
 	return this.join("|");
 };

 //返回数组
 return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"

稳妥构造函数模式

道格拉斯·克罗克福德（Douglas Crockford）发明了 JavaScript 中的稳妥对象（durable objects）这个概念，所谓稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。稳妥对象最适合在一些安全的环境中（这些环境中会禁止使用 this 和new），或者在防止数据被其他应用程序改动时使用。
示例代码如下：

function Person(name, age){
	let tempPerson = new Object();
	tempPerson.sayName = function(){
		console.log(`My name is ${name}`);
	}
	tempPerson.sayAge = function(){
		console.log(`My age is ${age}`);
	}
	return tempPerson;
}
const person1 = new Person('小刘先森', 26);
person1.sayName(); // 输出：My name is 小刘先森
person1.sayAge(); // 输出： My age is 26

const person2 = new Person('小刘儿', 26);
person2.sayName(); // 输出：My name is 小刘儿
person2.sayAge(); // 输出： My age is 26

注意：

  1. 以上方式创建的类不引用this
  2. 实例化时不使用new
  3. 除了调用sayName或者sayAge没有其它方法可以访问到构造函数中传入的数据，即使再添加其它方法也没办法访问到。

ES6定义类

ES6使用class关键字定义一个类，定义一个Person类代码如下：

class Person{
	// 构造函数
	constructor(name, age){
		this.name = name;
		this.age = age;
	}
	// 方法
	sayName(){
		console.log(`My name is ${this.name}`)
	}
	// 方法
	sayAge(){
		console.log(`My age is ${this.age}`)
	}
}
const person1 = new Person('小刘先森', 26) // 名字与年龄均为本作者 哈哈
person1.sayName(); // 输出：My name is 小刘先森
person1.sayAge(); // 输出： My age is 26

const person2 = new Person('小刘儿', 26)
person2.sayName(); // 输出：My name is 小刘儿
person2.sayAge(); // 输出： My age is 26

继承

ES5的继承

ES6的继承

小刘先森
关注
专栏目录
JavaScript实现类与继承
oscar999的专栏
01-18 3232
1. 前言 有人认为JavaScript 是一门面向过程的语言。 因为基本的使用基本上都是写函数，然后调用。 ==> 这种想法是不对的。 JS的创立者是:  Brendan Eich. 在JS创立的时候， Java 以及面向对象的设计已经大行其道了。 1995年5月，Netscape做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快
JavaScript中的类继承
我想我是海
11-23 772
JavaScript 一种没有类的，面向对象的语言，它使用原型继承来代替类继承。这个可能对受过传统的面向对象语言（如C++和Java）训练的程序员来说有点迷惑。JavaScript的原型继承比类继承有更强大的表现力，现在就让我们来看看。iJavaJavaScriptStrongly-typedLoosely-typedStaticDynamicClassicalPrototypalClassesF
JS中的八种继承方法
最新发布
msq6678的博客
07-26 1506
↵详细讲解js中的八种继承方法,原型链继承、构造函数继承（经典继承）、组合面试、原型式继承、Object.create()、寄生式继承、寄生组合式继承、ES6类继承。
js类与继承
universe的博客
04-14 355
<script> //创建类 class Person { //构造器方法 constructor(name,age){ this.name = name; this.age = age; } // 方法 speack(){ return console.log(`我的名字是${this.name},我的年龄是${this.a...
JS中的类与继承
wukeyan的博客
08-12 356
js中的类和继承是ES6中新出现的，它的使用方法和后端语言的使用方法是一样的。 js中类的使用： class Pet 然后构造函数constructor(prtName) 下面是代码，其中有很多注释，方便大家看懂。 class Pet { //利用class关键字创造一个Pet类 constructor(petName) { //利用构造方法初始化petName this.petName = petName }
JavaScript的类与继承
jimjack2013的博客
03-26 1024
JavaScript不像Java语言本身就具有类的概念，JavaScript作为一门基于原型(ProtoType)的语言，(推荐我之前写的我所认识的JavaScript作用域链和原型链)，时至今日，仍然有很多人不建议在JavaScript中大量使用面对对象的特性。但就目前而言，很多前端框架，例如React都有基于类的概念。首先明确一点，类存在的目的就是为了生成对象，而在JavaScript生成对象...
Javascript 类的继承实现代码
10-29
#### 一、JavaScript 类与继承基础 在JavaScript中，类的概念是在ES6（ECMAScript 2015）中引入的。类是一种特殊的函数，用于定义对象的模板和创建对象的蓝图。在JavaScript中实现类的继承主要通过以下几种方式： ...
JavaScript OOP类与继承
10-29
在JavaScript中，类和继承是OOP的核心概念，它们帮助我们组织和复用代码，创建复杂的对象结构。 类在JavaScript中是通过函数模拟实现的。一个函数可以被看作是一个类的构造器，当使用`new`关键字调用这个函数时，就...
JavaScript类的继承多种实现方法
11-20
JavaScript 类的继承是面向对象编程中的重要概念，它允许创建一个新的类（子类），该类不仅具有自身定义的属性和方法，还能够继承一个现有类（父类）的属性和方法。在JavaScript ES6 中，引入了`class`语法来支持类...
JavaScript类和继承 prototype属性
12-11
我们已经在第一章中使用prototype属性模拟类和继承的实现。 prototype属性本质上还是一个JavaScript对象。 并且每个函数都有一个默认的prototype属性。 如果这个函数被用在创建自定义对象的场景中，我们称这个函数为...
JavaScript类的继承操作实例总结
10-17
JavaScript中的类继承是实现面向对象编程的关键特性，它允许我们创建新的类，这些类可以从现有的类（称为基类或超类）中继承属性和方法。本文将深入探讨JavaScript中的类继承，包括类式继承、原型链继承以及使用...
javascript 类的继承
qq_50148250的博客
10-16 232
javascript类的继承 经典继承、圣杯继承
JavaScript---类及类的继承
郭静静--廊坊师范学院信息技术提高班十六期
09-27 326
系列文章目录 文章目录 ​​​​​​​ 目录 系列文章目录 文章目录 前言 一、类的创建及属性和方法设置 二、类的继承 1.子类继承父类---extends 2.继承时子类含有constructor---super 总结 前言 所谓类: 就是es6中对构造函数进行封装后的一种写法, 其本质其实也就是一个构造函数, 而其作用就是用来创建对象, 类通常是通过class来创建的; 提示：以下是本篇文章正文内容，下面案例可供参考 一、类的创建及属性和方法设置 创建类--.
JS类和继承
庸人方自扰，自在就好
04-05 466
类 JS中的class其实就是一个函数，class是关键字，后面是类名，一般以大写开头，然后是大括号 1：构造函数是实例化时执行的逻辑。constructor就是构造函数，里面的this.name中的this指向new出来的实例（当前实例），如3中的xialuo就是new出来的一个实例，执行了3后，this就等于xialuo这个实例对象了。括号里的name，number就是形参，而3中括号里的'夏洛'和2017102就是实参，new一个实例的时候需要把实参传进去，这样这个xialuo就变成真
JS中的类与类的继承
weixin_34294649的博客
10-09 1616
JS中的类与类的继承 我们知道，JS中没有类或接口的概念，即不能直接定义抽象的类，也不能直接实现继承。不过，为了编程的方便，我们可以在 JS 中模拟类和继承的行为。首先捋清楚类和对象的关系： 类：比如人类，指的是一个范围； 对象：比如某个人，指的是这个范围中具体的对象 js中的function作为构造函数时，就是一个类，通过ne...
js类的继承
weixin_34228617的博客
06-07 99
1、类式继承 首先要做的是创建构造函数。按惯例，其名称就是类名，首字母应该大写。在构造函数中，创建实例属性要用关键字this 。类的方法则被添加到prototype对象中。要创建该类的实例，只需结合关键字new调用这构造函数即可。 /* Class Person. */ function Person(name) { this.name = name; } Person...
Javascript 类继承机制
互联网
04-24 110
Javascript本身不是面向对象的语言，但是，使用基于Prototype使得javascript具备面向对象的形。以Prototype对象来装饰存在的object，被称为“class-less, prototype-oriented, or instance-based programming”编程。 请看下面的一个简单的例子： var BaseCar = func...
JavaScript中实现简单的类的继承
SummerCat(飘轩)的专栏
12-30 723
%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>   function Chool(){ //基类,学校   public://毫无意义   this.getName=function_getName;  }  function function_getName(strName){ //获取学校名字方法   return strName;  }   function C
JavaScript类继承
顺其自然~专栏
06-01 816
和其他功能一样，ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的，而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者，你有权决定最适用的继承方式。 创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现。记住，所有属性和方法都是公用的，因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法，也可以覆盖超类的属性和方法。 继承的方式： 对象冒充方式方式一 /*被继承类*/ functio
JavaScript类继承深入解析
"JavaScript中的类继承" 在JavaScript中，类继承是实现面向对象编程的关键机制，它允许创建基于现有类的新类，从而复用和扩展已有功能。虽然JavaScript本身是一种基于原型的编程语言，但随着ES6（ECMAScript 2015）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值