javascript 面向对象的继承的实现

最新推荐文章于 2023-04-06 22:51:18 发布

weixin_30251587

最新推荐文章于 2023-04-06 22:51:18 发布

阅读量108

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/laobeiV5/p/5106645.html

版权

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

转载于:https://www.cnblogs.com/laobeiV5/p/5106645.html

weixin_30251587

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 面向对象的继承的实现

JavaScript 中的面向对象的初步认识上面这篇简单的记录了我对 JS面向对象实现的一点初步认识和了解，下面继续研究JS面向对象，实现继承和多态。之前的学习我了解到了：构造函数加属性，原型prototype加方法，这样就实现了JS的面向对象。所以当我们实现继承的时候，应该也分属性和方法两个部分实现。说到继承首先应该对构造函数开始下手。现...
复制链接

扫一扫