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));
posted @ 2022-03-10 16:45  青仙  阅读(374)  评论(0编辑  收藏  举报