第一种:通过prototype来实现

prototype.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function Person(){}

        Person.prototype.username = "lisi";
        Person.prototype.gender = "man";
        Person.prototype.fav = ["read","eat"];

        var p1 = new Person();
        var p2 = new Person();
        p2.username = "zhangsan";
        //p2.fav.push("run");
        var fav = p2.fav;
        console.log(fav)
        p2.fav = new Array();
        p2.fav = p2.fav.concat(fav);

        p2.fav.push("run");

        /*console.log(p1.username);
         console.log(p1.fav);
         console.log(p2.username);
         console.log(p2.fav);*/

        function User(){}
        User.prototype = new Person();
        User.prototype.password = "123123";
        User.prototype.email = "admin@admin.com";

        User.prototype.say = function(){
            console.log(this);
        };

        var u = new User();
        u.gretting="Hello";
        var u1 = new User();

        console.log(u.username)
        u.say();
        u1.say();

    </script>
</head>
<body>

</body>
</html>

第二种方法:通过this关键字来实现;js中的this始终指向调用它的对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function Person(name,gender){
            this.name = name;
            this.gender = gender;
        }

        function User(name,gender,email,password){
            this.super = Person;
            this.super(name,gender);
            delete this.super;
            this.email = email;
            this.password = password;
            //this.Person(name,gender);
        }

        var p1 = new Person("lisi","man");

        var u = new User("zhangsan","msn","zhnagsan@zhangsan.com","123123123");
        console.log(p1.name);
        console.log(u.name);
        //var p2 = new Person();
        //p2.name = "lisi";
        //p2.gender = "man";
    </script>
</head>
<body>

</body>
</html>

第三种方法:通过call或者apply来实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function Person(name,gender){
            this.name = name;
            this.gender = gender;
        }

        function User(name,gender,email){

            //对象冒充  动态改变 函数的执行上下文
            //Person.call(this,name,gender);
            Person.apply(this,[name,gender]);

            this.email = email;

            this.say = function(msg){
                console.log(this);
                console.log(msg);
            }
        }

        var u = new User("lisi","man","lisi@lisi.com");
        console.log(u.gender);
        u.say("Hello");

        u.say.call(new Person("",""),"Hello1");
        u.say.apply(window,["lisi"]);

        console.log("--------------------")
        var name = "lisi";
        var obj = {
            name:"zhangsan",
            say:function(){
                console.log(this.name);
                return function(){
                    console.log(this.name);
                    return function(){
                        console.log(this.name);
                        return {
                            name:"wangwu",
                            say:function(){
                                console.log(this.name);
                            }

                        }
                    }
                }
            }
        };

        obj.say().call(obj)().say.apply(this);

        //obj.say()();
    </script>
</head>
<body>

</body>
</html>

JS中的继承实现方式的更多相关文章

  1. JS中写继承的方式

    有父子两个函数,代表两个类: var parent = function(){} var child = function(){} 一.直接继承 child.prototype = new paren ...

  2. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  3. Javascript中实现继承的方式

    js中实现继承和传统的面向对象语言中有所不同:传统的面向对象语言的继承由类来实现,而在js中,是通过构造原型来实现的,原型与如下几个术语有关: ①构造函数:在构造函数内部拥有一个prototype属性 ...

  4. 【学习笔记】六：面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  5. JS中的继承(上)

    JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...

  6. js中的继承和重载

      js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...

  7. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  8. 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  9. JS中的继承(下)

    JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...

随机推荐

  1. C语言sscanf用法解析与正则表达式支持

    最近学习算法和输入输出用到的基本知识,首先是我自己写的一份代码参考和学习了很多资源 后面会给出参考资料,他们写得更加详细,正则表达式的支持确实是一大亮点所在 #include<iostream& ...

  2. 如何检测NFC芯片型号？NFC手机即可！

    拿到了NFC标签之后,因为很多项目中的需求,用户需要对自已的NFC芯片进行选型,也就需要判断NFC芯片的类型?芯片是原装进口还是国产兼容的?芯片内存有多少?芯片存储内部结构如何......,而且用户还 ...

  3. Extjs Column布局常见问题及解决方法

    原文地址:http://blog.csdn.net/weoln/article/details/4339533 第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考.column ...

  4. BASIC-24_蓝桥杯_龟兔赛跑预测

    示例代码: #include <stdio.h> int main(void){ int t1 = 0 , t2 = 0 , l1 = 0 , l2 = 0 ; int v1 = 0 , ...

  5. zabbix 安装错误汇总

    由于公司业务需要,当前zabbixserver的压力较大,需要安装一个proxy缓解压力,开始慢慢琢磨proxy的安装.这些文档网上很多,就不在多说了.只把自己遇见的错误拿出来共享下 Zabbixpr ...

  6. 正则的使用及replace细讲

    1.var reg=/./ 与 var reg=/\./的区别? .代表任意一个字符 \.而后者代表这个字符串中得有一个. 2.?的使用 如果单独的一个字符后面带? /\d?/ 代表1个或0个这个字符 ...

  7. 字符串拼接和dom回流

    以对象的角度分析  对象的两方面 属性和方法 研究对象,主要是研究对象的属性和方法 案例: <ul id="list"> <li></li> & ...

  8. 1109 Group Photo （25 分）

    1109 Group Photo (25 分) Formation is very important when taking a group photo. Given the rules of fo ...

  9. 1058 A+B in Hogwarts （20 分）

    1058 A+B in Hogwarts (20 分) If you are a fan of Harry Potter, you would know the world of magic has ...

  10. servlet的讲解

    https://www.ibm.com/developerworks/cn/java/j-lo-servlet/