5、class的用法和原型属性和扩展方法
Es5之前的js版本没有class这个用法,都是用function来当作类。
所以Es6就有两种类的声明方法,一是function,二是class关键字,两者在继承方面写法不一致。
声明一个类和方法
方法不需要加function关键字,直接写方法名即可
class Person{
run(){
console.log("人在跑");
}
}
实例化类和调用类的方法
var person=new Person();
person.run();
继承一个类和调用父类的方法
继承使用extends关键字,要继承的类名写作关键字后面,这是属于构造函数继承,因为后面是父类的类名
class Chinese extends Person{
}
var chinese=new Chinese();
chinese.run();
使用父类的成员
要想使用父类的成员只有在该类的构造方法里使用,而且要用super方法将父类的成员引进来。
class Chinese extends Person{
//构造函数
constructor(){//想在子类内部使用父类的成员,只有在构造函数里使用,而且必须调用super()方法
super();//该方法用来引进父类的成员引进来
this.run();//在子类里面调用父类方法
}
}
ES5里定义类
这样定义的类就不想class那样用extends关键字继承其它类了,而是用原型链来继承
function Person(username){//类名后面带括号,所以既是类,又是构造函数,
this.age=18;//属性可以不用赋初始值
this.name=username;
}
Person.prototype.sex="男";//给Person原型添加属性
var person=new Person("张三");
console.log(`${person.name}-----${person.age}----${person.sex}`);
原型(prototype)
定义在类的原型里,所有类的实例都共享该原型属性,原型属性对于这些实例来说是全局的,用于function声明方式的类的继承
function Person(){
this.age=18;
this.name="姓名";
Person.prototype.sex="男";//给Person原型添加属性
}
var p1=new Person();
var p2=new Person();
p1.name="ace";
Person.prototype.sex="女";//修改Person类的sex原型属性
console.log(p2.name);//输出结果:姓名
console.log(p2.sex);//输出结果:女
console.log(Person.prototype.sex);//输出结果:女
prototype和this的区别
this和prototype 在大多数情况下效果差不多,但是
this不可以在类的外部定义,prototype可以在类的内部和外部定义
在调用this定义的属性时,只能在实例化的对象中调用,prototype既可以在对象内部调用,也可以直接用类名调用。
通过 类.prototype.属性名 的方式修改对象的原型属性值时,实例后的对象的对应的原型属性的值也会改变
给Array添加myfilter扩展方法
给Array的原型添加即可
var numbers=[1,2,3,4,5];
function myfilter(fun){
var array=this;//对象本身,这个方法是给Array数组做扩展方法的,所以this就是Array本身。
var newarray=[];
for(let i=0;i<array.length;i++){
if( fun(array[i])){
newarray.push(array[i]);
}
}
return newarray;
}
Array.prototype.myfilter=myfilter;//给Array的原型添加扩展方法
console.log(numbers.myfilter(m=>m>3));