es5中的类、原型链、静态方法、继承

 

下面一段代码，讲解了如何使用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()

// 对象冒充结合原型链实现继承：既可以实现继承原型链中的属性和方法，实例化时也能够给父类传参

对象冒充结合原型链实现继承：既可以实现继承原型链中的属性和方法，实例化时也能够给父类传参