JS面向对象编程-继承

   javascript的继承

函数的调用方式:

一般的面向对象语言都是通过class来定义类，然后在class内部定义构造函数和其他的属性、行为。

但是，javascript没有class关键字，是通过函数来充当类的。函数在js中可以当普通函数来使用，也可以当类来使用。

在充当类的时候，它本身又担负着构造函数的责任。

函数的调用方式决定它是普通函数还是类。

1.作为函数，直接使用()进行调用，例如 function test() {}; test();

2.作为类，同时也是构造函数，使用new调用。

例如：function test(); new test();

两种调用方式，函数内部的this指向会不同，作为函数，其this指向的是window对象；而作为类，其this指向的实例对象。

function test() {
    this.n = "132"; // 等同于 window.n = "132";
}

test();
alert(n);  //window.n   132

// function test1() {
//     var n2 = "354";
// }
// test1();
// alert(n2);  //报错，n2未定义


function test2() {
    this.n3 = "465";
}
var t = new test2();
alert(t.n3); //465

言归正传，如果子类继承父类，就要就要继承父类中构造函数和原型中的属性和方法。

1.构造函数的继承

function Animal(name) {
    this.name = name;
    this.type = "animal";
}
Animal.prototype = {
    say:function() {
        alert(this.type + this.name);
    }
}

function Bird(name) {
    Animal.call(this,name);
}

Bird.prototype = {

}

var myBird = new Bird("xiaocui");
alert(myBird.name);

 2.原型的继承

function Animal(name) {
    this.name = name;
    this.type = "animal";
}
Animal.prototype = {
    say:function() {
        alert(this.type + this.name);
    }
}

function Bird(name) {
    Animal.call(this,name);
}

Bird.prototype = Animal.prototype;


Bird.prototype.fly = function() {
    alert("flying");
}

var myBird = new Bird("xiaocui");
alert(myBird.name);
alert(myBird.fly());
var dog = new Animal("wangcai");
alert(dog.fly());

 

 如果通过“Bird.prototype = Animal.prototype;”的形式给子类继承原型，会使父类原型中也会获得子类原型后来添加的方法和属性。

这涉及JS中传值和传址量个问题。

如果是，数值型、布尔型、字符型等基本数据类型，在赋值时会将数据复制一份，将复制的数据尽心赋值，也就是传值。如果是数组，hash对象等复杂数据类型，在赋值时会直接用内存地址赋值，而不是将数据复制一份，用复制的数据进行赋值，也就是传址。

有时候，变量传址给我们带来不必要的麻烦，我们有时候就需要让复杂数据类型也可以进行传值。

一个简单的方式是遍历数组或者hash对象，然后对简单数据进行赋值。

我们可以用for in 来遍历prototype来实现prototype的传值。

我们还有另一种方式实现原型继承

function Animal(name) {
    this.name = name;
    this.type = "animal";
}
Animal.prototype = {
    say:function() {
        alert(this.type + this.name);
    }
}
function Bird(name) {
    Animal.call(this,name);
}
Bird.prototype = new Animal();
Bird.prototype.constructor = Bird;
Bird.prototype.fly = function(){
    alert("flying");
}

var myBird = new Bird("xiaocui");
myBird.say();
myBird.fly();
var myDog = new Animal("wangcai");
myDog.fly(); // error myDog.fly is not a function

 

其中 'Bird.prototype.constructor=Bird' 是因为Bird.prototype=new Animal();时，Bird.prototype.constructor 指向了Animal.我们需要将它纠正，重新指回Bird。