javascript基础-js继承

 

 

1.prototype方式

 

示例：没有使用prototype（下列这些代码只能获取array1数组的总和，而无法对array2数据进行求和）

var array1 = new Array(1,4,9,13);
var array2 = new Array(15, 20, 35);

array1.sum1 = function( ) {
    var result = 0;
    for(var i=0; i<array1.length; i++) {
        result = result + array1[i];
    }
    return result;
};

 

示例：使用 prototype后

Array.prototype.sum = function( ) {
    var result = 0;
    for(var i=0; i<array1.length; i++) {
        result=result + array1[i];
    }
    return result;
}
//使用prototype代表对所有数组的求和计算
console.log(array1.sum1( ));     //27
console.log(array2.sum( ));        //27

 总结：使用 prototype 可以对某一类对象方法进行扩展

 

那么如何使用prototype继承？

示例：

// 父类
function Parent( ) {
    var name;
    var age;
    this.setName = function(thisName) {
        name = thisName;
    }
    this.getName = function( ) {
        return name;   
    }
    this.setAge = function(thisAge) {
        age = thisAge;   
    }
    this.getAge = function() {
        return age;   
    }
}
// 子类
function Child( ) { 

}
// 子类继承父类，将直接继承父类的所有public属性和方法
Child.prototype = new Parent();
var c = new Child();
c.setName("张三");
c.setAge(25);
console.log(c.getName( )+" "+c.getAge( ));

 

 

2.apply方式

 

语法：

Function.apply(obj, args)  方法能接收两个参数

obj：这个对象将代替Function类里this对象

args：这个是数组，它将作为参数传给Function（args-->arguments）

 

apply方法的使用：

function Parent(name) {
    this.name = name;
    var age = 25;
    this.getAge = function( ) {
        return age;
    }
}
function Child(name) {
    this.say = function() {
        return this.name+" "+this.getAge();
    }
    this.getName = function(){
        return name;
    }
}
var c = new Child("张三");
Parent.apply(c,[c.getName()]);
console.log(c.say());     //张三 25

var c=new Child("张三");
Parent.apply(c,[""]);
console.log(c.say());     // 25

 

如何使用apply继承？

示例一（不推荐）：

function Parent(name) {
    var name = name;
    this.getName = function( ) {
        return name;
    }
}
function Child() {

}

var c = new Child();
Parent.apply(c,["张三"]);
console.log(c.getName());     // 25

 

 

示例二：

/*定义一个人类*/  
function Person(name, age) {  
    this.name=name;  
    this.age=age;  
}  
/*定义一个学生类*/  
function Student(name, age, grade) {  
    Person.apply(this, arguments);  
    this.grade = grade;  
}  
//创建一个学生类  
var student=new Student("zhangsan",21,"一年级");  
//测试  
console.log("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);  

分析:
Person.apply(this,arguments);
this:在创建对象在这个时候代表的是student
arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];  通俗一点讲就是父类Person构造中的参数

 

 

3.call方式

与apply 方法非常类似，只不过是apply 中 args 中一个数据，而call 中是一个一个的参数

语法：

Function.apply(obj, arg1, arg2, ...)   可以接收（0-N）个参数

 

call 方法的使用

function Show() {
    console.log(this);   
}
// 1.直接调用：Show( );    这种调用方法其实是js 中的一种缩写
// 2.Show.call( );        这种才是js调用
Show.call( );           // window
Show.call(12);          // 将打印12，即show方法中的this值变为12

function Show2(name, age) {
    console.log(this, name, age);   
}
Show2("波哥", 25);                         // window, "波哥", 25
Show2.call("abc", "caoxiaobo", 25);       // {"abc"}, "caoxiaobo", 25

 

 如何使用call方法继承？

function A( ) {
    this.abc = 24;   
}
A.prototype.get = function( ) {
    console.log("abc的值为：" + this.abc);
}
function B( ) {
    A.call(this);            // 继承A的所有属性
}
B.prototype.save = function( ) {
    console.log("B方法中的save");   
}

B.prototype = A.prototype;    // 继承A的所有方法（注间，不能写在创建B对象的下面）
var b = new B();
var a = new A();
console.log(b.abc);
b.get( );
a.save( );

 

 

function Parent(name, age) {
    var name = name;
    var age = age;
    this.getName = function( ) {
        return name;
    }
    this.getAge = function( ) {
        return age;
    }
}
function Child() {

}

var c = new Child();
Parent.call(c,"张三", 20);
console.log(c.getName(), c.getAge());     // 张三 20

同样也可以这样写：

function Parent(name, age) {
    var name = name;
    var age = age;
    this.getName = function( ) {
        return name;
    }
    this.getAge = function( ) {
        return age;
    }
}
function Child(name, age) {
    Parent.call(c, name, age);
}

var c = new Child("张三", 20);
console.log(c.getName(), c.getAge());     // 张三 20

 

 

 

4.对象冒充

 

实现原理：让父类的构造函数成为子类的方法，然后调用该子类的方法，通过this关键字给所有的属性和方法赋值

function Parent(name) {
    this.name = name;
    var age = 40;
    this.getAge = function( ) {
        return age;
    }
}
function Child(name) {
    this.method = Parent;     // this.method是作为一个临时的属性，并且指向Parent所指向的对象，
    this.method(name);        // 执行this.method方法，即执行Parent所指向的对象函数
    delete this.method;       // 销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
    this.say = function( ) {
        return this.name+" "+this.getAge();
    }
}
var c = new Child("李四");
console.log(c.say());

 

 

 

 

5.混合模式

 propotype + call / apply 方式

function Parent( ) {
    this.getAge = function( ) {
        return this.age;
    }
}

Parent.prototype.sayParent = function( ) {
   alert("this is parentmethod!!!");
}

function Child(name) {
    Parent.call(this);
    this.name = name;
    this.age = 40;
    this.say = function( ) {
        return this.name+" "+this.getAge( );
    }
}

Child.prototype = new Parent();
var c = new Child("张三");
console.log(c.say( ));
c.sayParent( );