【基础类】—面向对象类系统性学习-Toy模板网

这篇具有很好参考价值的文章主要介绍了【基础类】—面向对象类系统性学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、类与实例

1. 类的声明

构造函数模拟一个类

function Animal () {
	this.name = 'name'
}

ES6 Class声明

//  类名
class Animal2 {
    // 构造函数
	constructor () {
		// 属性
		this.name = name
	}
}

2.生成实例

通过 new 实例化一个类

console.log(new Animal(), new Animal2())
// PS: 类没有参数时，可以省略括号
console.log(new Animal, new Animal2)

二、类与继承

1.如何实现继承

借助构造函数实现继承

function Parent1 () {
	this.name = 'parent1';
}
function Child1 () {
	// call/ apply 改变函数运行的上下文, Parent1再子类的构造函数执行，同时修改了父类this的指向到child内部，从而导致父类的属性都会挂载到子类这个实例上
	Parent1.call(this);
	this.type ='child1'
}

console.log(new Child1())
Child1 {name: 'parent1', type: 'child1'}

缺点： Parent1的原型上的属性和方法，并没有被child所继承。

Parent1.prototype.say = function () {
	console.log('你好')
}
Child1 下没有say方法

总结：只实现了部分继承，如果父类的属性都在构造函数里面，完全可以实现继承，如果父类的原型对象上还有方法或属性，那么子类是无法拿到方法或属性的

借助原型链实现继承

function Parent2 () {
	this.name = 'parent2';
}
function Child2 () {
	this.type = 'child2'
}
Child2.prototype = new Parent2();
// prototype 是子类构造函数的一个属性，这个属性是一个对象，这个对象是可以任意赋值的，这个对象赋值了一个Parent2的实例
// new Child2() 生成一个新的实例， new Child2.__proto__ === Child2.prototype === new Parent2()
console.log(new Child2())

function Parent2 () {
	this.name = 'parent2';
    this.play = [1,2,3]
}
function Child2 () {
	this.type = 'child2'
}
Child2.prototype = new Parent2();

var s1 = new Child2();
var s2 = new Child2();
console.log(s1.play, s2.play)
(3) [1, 2, 3] (3) [1, 2, 3]
s1.play.push(4);
console.log(s1.play, s2.play)
(4) [1, 2, 3, 4] (4) [1, 2, 3, 4]

缺点：因为原型链的原型对象是共用的，所以修改原型对象的属性，其他实例也会受影响

s1.__proto__  === s2.__proto__
true

组合方式继承

function Parent3 () {
	this.name = 'parent3'
	this.play = [1,2,3]
}
function Child3 () {
	Parent3.call(this);
	this.type = 'child3'
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4)
console.log(s3.play, s4.play)
(4) [1, 2, 3, 4] (3) [1, 2, 3]
缺点：Parent3.call(this) 和 new Parent3() , Parent3 执行了2次

组合方式继承优化1

function Parent4 () {
	this.name = 'parent4'
	this.play = [1,2,3]
}
function Child4 () {
	Parent4.call(this);
	this.type = 'child4'
}
Child4.prototype = Parent4.prototype;
var s5 = new Child4();
var s6 = new Child4();
s5.play.push(4)
console.log(s5.play, s6.play)
// (4) [1, 2, 3, 4] (3) [1, 2, 3]
// s5 是否Child4的实例， s5 是否是Parent4的实例
console.log(s5 instanceof Child4, s5 instanceof Parent4)
// true true
s5.constructor
ƒ Parent4 () {
	this.name = 'parent4'
	this.play = [1,2,3]
}

缺点：无法区分构造函数的实例，是由父类创造的还是有子类创造的文章来源地址https://www.toymoban.com/news/detail-632272.html

组合方式继承优化2

function Parent5 () {
	this.name = 'parent5'
	this.play = [1,2,3]
}
function Child5 () {
	Parent5.call(this);
	this.type = 'child5'
}
// 通过中间对象的方法，把父类和子类区分开
Child5.prototype = Object.create(Parent5.prototype)
Child5.prototype.constructor = Child5
var s7 = new Child5();
console.log(s7 instanceof Child5, s7 instanceof Parent5)
console.log(s7.constructor)
true true
ƒ Child5 () {
	Parent5.call(this);
	this.type = 'child5'
}