第一种:通过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. IONIC 页面之间传递参数

    HomePage 定义goToMyPage方法,传递id和name MyPage接收参数

  2. MySQL架构设计谈：从开发规范、选型、拆分到减压(转)

    作者介绍 李辉,原新浪爱彩票运维负责人,常用网名:门牙没了.曾主导新浪爱彩票的MySQL运维工作.培训合伙人.资深讲师,中国科学院大学在读研究生(大数据方向),擅长大型项目的关系型数据库运维和管理,现 ...

  3. C++中，关于#include<***.h>和#include"***.h"的区别

    转载:天南韩立CSDN博客 #include<>直接从编译器自带的函数库中寻找文件 #include" "是先从自定义的文件中找 ,如果找不到在从函数库中寻找文件 采用 ...

  4. jquery ztree异步搜索

    一.初始异步加载树 初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图: 代码如下: var treeSetting = { async: { enable: true, ur ...

  5. 汽车收费 C++ PTA

    7-1 汽车收费(10 分) 现在要开发一个系统,管理对多种汽车的收费工作. 给出下面的一个基类框架 class Vehicle { protected: string NO;//编号 public: ...

  6. Js/jquery获取当前日期时间及其它操作

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  7. Microsoft Enterprise Library

    http://entlib.codeplex.com/ 微软企业库 现在已经到到6版本了 2013年更新的. https://www.microsoft.com/en-us/download/conf ...

  8. eclipse 常用jar包总结

    BeanUtils: DbUtils: FileUpload: IO: Lang: Logging: cglib: mysql-connector: Pool:[datasource] DBCP:[d ...

  9. 第4章 文件和目录（5）_贯穿案例2：mini shell（1）

    6. 贯穿案例2:mini shell(1) [阶段性任务]实现cd.pwd和quit命令 //job.h #ifndef __JOB_H__ #define __JOB_H__ //接收命令行参数 ...

  10. oracle 所有 hint(转)

    oracle 10g 有64个hints , 11g 增加到71 个, 下表中红色的代表已经过时的, 粗体的是11g 新增. Optimization Goals and Approaches (2) ...