javascript 面向对象的继承的实现

来源：互联网发布：新网域名证书打印编辑：程序博客网时间：2024/05/16 19:16

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

0 0