javascript之面向对象编程之属性继承

函数继承可以分为两种：1、继承其 this 属性 2、继承其 prototype 属性。
本文只讨论第一种情况。
-
在JavaScript中，没有继承关键字： extends。那么，它是通过哪些方法，在用构造函数生成对象时，把对象基于另外一个构造函数，进行属性的生成（继承/拷贝）的呢？即：对一个函数使用 new 关键字生成对象时，其对象的属性，可以来自于其它函数。

本文提供两种写法：

第一种（非正式）：
但需要理解这种用法。

function Animal (name, age){
   this.name = name;
   this.age = age;
}

function Dog (name, age){
   this.i = Animal;
   this.i(name, age);
}

d = new Dog('hello',20);

console.log(d);

/*

Dog {name: "hello", age: 20}
    age: 20
    i: function Animal(name, age)
    name: "hello"
    __proto__: 
        constructor: function Dog(name, age)


*/

上面一种写法是引用外部函数 Animal 作为自己的一个内部成员函数。
这是一种匿名函数的写法。

相当于：

function Dog (name, age){
   this.i = function Animal (name, age){
       this.name = name;
       this.age = age;
   }
   this.i(name, age);
}

相当于：

function Dog (name, age){
   /*
   When calling a function, instead of using the 'new' keyword to create
   object, 

              // Calling a function 
              Animal();

              //Using the 'new' keyword to create object.
              new Animal();


   The inner 'this' is the same one of the outer 'this'. Because 
   there is no 'this' object created inside of the function, so it has to 
   refer to the outer one.
   */
   
   this.i = function (name, age){
       this.name = name;           // 2. so the inner "this" is the same 
       this.age = age;             // one of the outer "this".
   }
   this.i(name, age);              // 1. function call, no 'this' created.

}

思考： 调用函数时，"this"是谁？？

既然，函数调用不生成 "this" 对象。
那么，直接在 Dog 内调用 Animal 不可以吗？
答案：否

/*
  The called function belongs to which, the inner 'this' inside of
  the called function refers to that object.
*/

function Dog (name, age){ // if call Animal directly,
    Animal(name,age);     // the Animal function here belongs to 'window',
}                         // so 'this' inside of Animal refers to 'window'

等价于：

function Dog(name, age){
    window.Animal(name, age);  // "this" refers to "window" object.
}

第二种（正式）：
使用 apply() 函数或 call() 函数

apply() : apply "this" object to the(that) function, then call it.

function Animal (name, age){
   this.name = name;
   this.age = age;
}

function Dog (name, age){
   Animal.apply(this, arguments);  // apply "this" object to Animal function.  
                                   // or  
                                   // call Animal function with a given 'this' 
                                   // object, instead of referring to other 'this'.
}

d = new Dog('hello',20);

console.log(d);

/*

Dog {name: "hello", age: 20}
    age: 20
    name: "hello"
    __proto__: 
        constructor: function Dog(name, age)


*/

console.log(d instanceof Dog);  // true

//

结语：

这种 this 对象的继承方式是没有任何问题的。
但是它有一个缺点：重复。

在以下方面这种缺点体现的尤为明显：
1、属性是字符类型，但是公有。
2、属性是函数类型。

例如：

function Person(){
    this.type = "human";
    this.sayHello = function(){
       return "Hello"; 
    }
}

象上面的情况，把属性type、sayHello 设为 prototype 更合适。

function Person(){
    // this.name = "xxx";
}
Person.prototype.type = "human";
Person.prototype.sayHello = function(){
    return "Hello"; 
}

问题：如何继承其它函数的 prototype 属性？

请继续阅读（未完待续）。

—————————————

javascript 函数基础系列文章

1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this
7、javascript之function的apply(), call()

___________

javascript 面向对象编程系列文章：

    1、javaScript之面向对象编程
    2、javascript之面向对象编程之属性继承
    3、javascript之面向对象编程之原型继承


-

-
转载请注明
原文出处：http://lixh1986.iteye.com/blog/2332467
-

-

javascript之面向对象编程之属性继承

猜你喜欢