欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES5类与继承

程序员文章站 2022-03-08 22:26:40
...

ES5的类与继承

搞清楚ES5类主要是要搞清楚静态属性、静态方法、实例属性、实例方法的概念。
上代码来看看:

//ES5自定义类
function People(name,age){
    //实例属性 定义在构造函数里
    this.name=name
    this.age=age
    // this.showName=function(){//每次创建对象都要new Function() 通常不把方法写在类里而是写在原型上
    //     console.log("我的名字是"+this.name)
    // }
    People.count++
}
//实例方法 定义在原型对象上的方法和属性多个实例共享
People.prototype.showName=function(){
    console.log('我的名字是'+this.name)
}
//静态属性
People.count=0

//静态方法
People.getCount=function(){
    console.log('当前共有'+People.count+'个人')
    console.log(this.age)
    console.log(this)//打印出People类的构造函数
}

let p1=new People('www',11)
console.log(p1)//People {name: "www", age: 11}
p1.showName()//我的名字是www
console.log(p1.count)//undefined
p1.getCount()//报错

let p2=new People('ddd',22)
console.log(p2)//People {name: "ddd", age: 22}
p2.showName()//我的名字是ddd

console.log(People.count)//2
People.getCount()
//当前共有2个人
//undefined
//f People(name,age){
//    this.name=name
//    this.age=age
//    People.count++
//}

从以上可以看出,静态方法/属性直接定义在类上,需要用类名.方法名/属性名的格式调用。

实例方法/属性定义在类的构造函数里,其中,实例属性如果定义在构造函数里,那么每次创建构造函数都需要再创建一次该实例方法,所以一般写在构造函数外面,定义在原型上。在调用上,实例方法/属性要通过先引用一个变量,指向构造函数定义的新对象,可以理解为p1就是构造函数People的一个引用,也就是指针,p1就可以指向showName这个方法(p1.showName()),如果直接写People.showName()是会报错的,因为People不是一个指针。

接下来说说继承

//父类
function Animal(name){
    this.name=name
    this.age=function(){
    	console.log(18)
    }
}
Animal.prototype.showName=function(){
    console.log('名字是'+this.name)
}

//子类
function Dog(name,color){
    Animal.call(this,name)//构造函数继承 只能继承属性 不能继承方法
    this.color=color
}
let d1=new Dog('wangcai','white')
console.log(d1.name,d1.color)//wangcai white
d1.age()//18
d1.showName()//undefined

//原型链继承 只能继承方法
Dog.prototype=new Animal()//让Dog的原型指向Animal的实例
let d2=new Dog('xiaohei','hei')
d2.showName()//名字是wangcai

继承父类属性用到了call用以改变this的指向(call的第一个参数是this的新指向,之后的参数是要传递的参数),在这里,改变的是Animal构造函数中this,让它指向当前作用域的this,并传递name参数。继承父类属性格式为:父类.call(this,参数一,参数二,……)
但是构造函数继承只能继承父类内部的属性和方法,不能继承父类原型上的属性/方法,而通常父类的实例方法最好定义在原型上,原因上面有说,为了解决这个问题,继承方法只能用原型链继承:子类.prototype=new 父类()
所以,要想同时继承方法和属性,要用到上面两种**(构造加原型)的组合式继承。**

相关标签: ES es6