下面一段代码,讲解了如何使用es5创建一个类、设置原型链属性方法、设置静态方法
function Person(name,age) {
// 构造函数里面的方法和属性
this.name=name
this.age=age
this.run=function(){
console.log(`${this.name}-----${this.age}`)
}
}
// 原型链上面的属性和方法
// 原型链上绑定的属性和方法和构造函数中的有什么区别:原型链上的属性和方法可以被多个实例共享
Person.prototype.sex='男'
Person.prototype.work=function(){
console.log(`${this.name}---------${this.age}--------${this.sex}`)
}
// 静态方法
Person.setName=function(){
console.log('静态方法')
}
var p=new Person('zhangsan','20') // 实例方法通过实例化来调用的,静态方法是通过类名直接调用
p.run()
p.work()
Person.setName() // 执行静态方法
其中
1、原型链上绑定的属性和方法和构造函数中属性和方法的区别:原型链上的属性和方法可以被多个实例共享
2、构造函数中的方法通过实例对象调用,静态方法通过类名直接调用。
es5中的继承
1、对象冒充实现继承
function Person(name,age){
this.name=name
this.age=age
this.run=function(){
console.log(`${this.name}--${this.age}`)
}
}
Person.prototype.work=function(){
console.log('work')
}
function Web(name,age){
Person.call(this,name,age) // 对象冒充实现继承
}
var w=new Web('李四',18)
w.run()
// w.work() w.work is not a function
// 对象冒充继承:继承不了原型链上面的属性和方法
对象冒充继承的缺点:继承不了原型链上面的属性和方法
2、原型链继承
function Person(name,age){
this.name=name
this.age=age
this.run=function(){
console.log(`${this.name}--${this.age}`)
}
}
Person.prototype.work=function(){
console.log('work')
}
function Web(name,age){
}
Web.prototype=new Person() // 原型链继承Person
var w=new Web('李四',18)
w.run()
w.work()
// 原型链继承:可以继承构造函数及原型链上的属性和方法。但实例化子类的时候没法给父类传参
// 上面的w.run()执行后,打印出来的是: undefined--undefined
原型链继承:可以继承构造函数及原型链上的属性和方法。缺点:但实例化子类的时候没法给父类传参
3、最好的方式:对象冒充结合原型链继承
function Person(name,age){
this.name=name
this.age=age
this.run=function(){
console.log(`${this.name}--${this.age}`)
}
}
Person.prototype.work=function(){
console.log('work')
}
function Web(name,age){
Person.call(this,name,age) // 对象冒充继承
}
Web.prototype=new Person() // 原型链继承
var w=new Web('李四',18)
w.run()
w.work()
// 对象冒充结合原型链实现继承:既可以实现继承原型链中的属性和方法,实例化时也能够给父类传参
对象冒充结合原型链实现继承:既可以实现继承原型链中的属性和方法,实例化时也能够给父类传参