javascript 面向对象的继承的实现

JavaScript 中的面向对象的初步认识


上面这篇简单的记录了我对 JS面向对象实现的一点初步认识和了解,下面继续研究JS面向对象,实现继承和多态。


之前的学习我了解到了 :构造函数加属性,原型prototype加方法,这样就实现了JS的面向对象。所以当我们实现继承的时候,应该也分 属性 方法 两个部分实现。

说到继承 首先应该对构造函数开始下手 。现在有这样一个构造函数:

function Person(name){
     this.name = name;
};

Person.prototype.say = function (){
     console.log(this.name +" say hello~");
}


下面创建一个继承Person的Student对象,就得这样写Student的构造函数,才可以让Student获得Person的属性

<pre name="code" class="javascript">        function Student(name,age){
            Person.call(this,name);//将Student的this,传入到Peson中去
        }


上面那句 Person.call(this,name),实际上改变了 Person的作用域 ,将他替换成了 Student的,这样才是算Stuent继承了Person的属性。

 


关于 this ,call() 这方面的一些内容,以后会详细分析。。。 这里先大概了解他们代表什么 有什么作用就行。。。


接下来就是从 prototype 上继承 方法。(我讨厌叫它原型。。)


要是想让 Student 拥有 Person的方法,而且Person的方法全都是在它的prototype上。所以,要实现所谓方法的继承,其实就是让Student拥有和Person一样的prototype。

但是如果我们这样写

B.prototype = A.prototype;


看上去是让B 有了A一样的prototype,其实这样并不能满足继承的要求。

因为JS中存在引用这个概念,上面的操作其实是让B的prototype 和 A的prototype 指向了同一块内存区域(我的理解 =。=),如果你要修改了B的prototype,A的prototype其实也被修改了,这样就没法满足重写和拓展自己的方法这样操作。(具体的要了解JS中的引用=。=)

所以得这写样

        for(var i in A.prototype){
            B.prototype[i] = A.prototype[i];
        }


这样就满足B拥有了和A一样的prototype并且他们互相是独立的,也就可以实现方法的继承了。

现在把两个方面总结起来写个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function Person(name){
            this.name = name;
        };

        Person.prototype.say = function (){
            console.log(this.name +" say hello~");
        }

        function Student(name,age){
            Person.call(this,name);
        }

        for(var i in Person.prototype){
            Student.prototype[i] = Person.prototype[i];
        }
        //重写say 方法
        Student.prototype.say = function(){
            console.log(this.name +" is a Student");
        }

        Student.prototype.study = function(){
            console.log(this.name +" is studying");
        }

        var tom = new Person('tom');
        var jerry = new Person('jerry');
        var danny = new Student("danny");

        tom.say();
        jerry.say();
        danny.say();

        danny.study();
        tom.study();
    </script>
</head>
<body>

</body>
</html>


2015.12.30

 

posted @ 2015-12-30 09:11  老贝V5  阅读(205)  评论(0编辑  收藏  举报