JavaScript继承

es6继承

class Square extends Polygon {
constructor(length) {
// 在这里, 它调用了父类的构造函数, 并将 lengths 提供给 Polygon 的"width"和"height"
super(length, length);
// 注意: 在派生类中, 必须先调用 super() 才能使用 "this"。
// 忽略这个,将会导致一个引用错误。
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.area = value;
}
}
es5中有三种继承方式

js原型(prototype)实现继承

复制代码 代码如下:

    function Person(name,age){  
        this.name=name;  
        this.age=age;  
    }  
    Person.prototype.sayHello=function(){  
        alert("使用原型得到Name:"+this.name);  
    }  
    var per=new Person("小明",21);  
    per.sayHello();
   //输出:使用原型得到Name:小明  

    function Student(){}  
    Student.prototype=new Person("小花",21);  
    var stu=new Student();  
    Student.prototype.grade=5;  
    Student.prototype.intr=function(){  
        alert(this.grade);  
    }  
    stu.sayHello();//输出:使用原型得到Name:小花  
    stu.intr();//输出:5  

构造函数实现继承

function  Parent(name){  
    this.name=name;  
    this.sayParent=function(){  
        alert("Parent:"+this.name);  
    }  
}  

function  Child(name,age){  
    this.tempMethod=Parent;  
    this.tempMethod(name);  
    this.age=age;  
    this.sayChild=function(){  
        alert("Child:"+this.name+"age:"+this.age);  
    }  
}  

var parent=new Parent("江剑臣");  
parent.sayParent(); //输出:“Parent:江剑臣”  
var child=new Child("李鸣",24); //输出:“Child:李鸣 age:24”  
child.sayChild();  



3.call , apply实现继承
复制代码 代码如下:





二、call和apply的用法(详细介绍)
js中call和apply都可以实现继承,唯一的一点参数不同,func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])。
JS手册中对call的解释:
复制代码 代码如下:

call 方法
调用一个对象的一个方法,以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])  

参数
thisObj
可选项。将被用作当前对象的对象。

arg1, arg2, , argN
可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

说简单一点,这两函数的作用其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。下面以apply为例,说说这两个函数在 js中的重要作用。如:
复制代码 代码如下:

function Person(name,age){ //定义一个类
this.name=name; //名字
this.age=age; //年龄
this.sayhello=function(){alert(this.name)};
}
function Print(){ //显示类的属性
this.funcName="Print";
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //学生类
Person.apply(this,arguments);//比call优越的地方
Print.apply(this,arguments);
this.grade=grade; //年级
this.school=school; //学校
}
var p1=new Person("卜开化",80);
p1.sayhello();
var s1=new Student("白云飞",40,9,"岳麓书院");
s1.show();
s1.sayhello();
alert(s1.funcName);

另外,Function.apply()在提升程序性能方面有着突出的作用:
我们先从Math.max()函数说起,Math.max后面可以接任意个参数,最后返回所有参数中的最大值。
比如
复制代码 代码如下:

alert(Math.max(5,8)); //8
alert(Math.max(5,7,9,3,1,6)); //9

//但是在很多情况下,我们需要找出数组中最大的元素。   


var arr=[5,7,9,1];  
//alert(Math.max(arr));    // 这样却是不行的。NaN   


//要这样写   
function getMax(arr){  
    var arrLen=arr.length;  
    for(var i=0,ret=arr[0];i  

你可能感兴趣的:(JavaScript继承)