js es5 类 原型链和继承

构造函数实例属性和方法

// 构造函数
function Person() {
	// 实例属性和方法，需实例才能调用
	this.name = '李狗蛋'
	this.run = function () {
		console.log(this.name)
	}
}

// 原型链上添加属性和方法
// 原型链的属性和方法会被多个实例共享，构造函数不会
Person.prototype.age = 20
Person.prototype.foo = function () {
	console.log(this.name + 'foo')
}

// 静态属性和方法，不用实例即可调用
Person.sex = '男'
Person.boo = function () {
	console.log('静态方法boo')
}

// 静态属性和方法调用
console.log(Person.sex) // 输出20
Person.boo() // 输出静态方法boo

// 实例化
var p = new Person()
// 实例属性和方法调用
console.log(p.name) // 输出李狗蛋
console.log(p.age) // 输出20
p.run() // 输出李狗蛋
p.foo() // 输出李狗蛋foo

继承 原型链+对象冒充模式

对象冒充模式

// 构造函数
function Person() {
	// 实例属性和方法，需实例才能调用
	this.name = '李狗蛋'
	this.run = function () {
		console.log(this.name)
	}
}

Person.prototype.age = 20
Person.prototype.foo = function () {
	console.log(this.name + 'foo')
}

// 继承 对象冒充继承模式
function Student() {
	Person.call(this)
}
// 实例化
var s = new Student()
// 对象冒充可以继承构造函数里面的属性和方法， 但是不能继承原型链上的属性和方法
s.run() // 输出李狗蛋
s.foo() // 报错

原型链模式

// 构造函数
function Person() {
	// 实例属性和方法，需实例才能调用
	this.name = '李狗蛋'
	this.run = function () {
		console.log(this.name)
	}
}

Person.prototype.age = 20
Person.prototype.foo = function () {
	console.log(this.name + 'foo')
}
// 原型链继承可以继承构造函数和原型链的属性和方法
function Student() {}
Student.prototype = new Person()
var s = new Student()
s.run() // 输出 李狗蛋
s.foo() // 输出 李狗蛋foo

原型链模式的问题

// 假如name是传参
// 原型链继承，实例时，子类无法给父类传参
function Person(name) {
	this.name = name
	this.run = function () {
        console.log(this)
		console.log(this.name + '在工作')
	}
}

Person.prototype.age = 20
Person.prototype.foo = function () {
	console.log(this.name + 'foo')
}
function Student(name) {}
Student.prototype = new Person()
var s = new Student('李狗蛋')
s.run() // 输出 undefined在工作

原型链+对象冒充组合模式

function Person(name) {
	this.name = name
	this.run = function () {
		console.log(this.name + '在工作')
	}
}

Person.prototype.age = 20
Person.prototype.foo = function () {
	console.log(this.name + 'foo')
}
function Student(name) {
    // 对象冒充继承
    Person.call(this, name)
}
// 原型链继承
Student.prototype = new Person()
// 或者
Student.prototype = Person.prototype
var s = new Student('张翠花')
s.run() // 输出 张翠花在工作
s.foo() // 输出 张翠花foo