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

喜欢ヅ旅行 2021-09-19 03:10 331阅读 0赞

### 下面一段代码，讲解了如何使用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()
    
    // 对象冒充结合原型链实现继承：既可以实现继承原型链中的属性和方法，实例化时也能够给父类传参

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