zoukankan      html  css  js  c++  java
  • JS中的继承实现方式

    第一种:通过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>
  • 相关阅读:
    Linux命令(一)
    数据库SQL学习(一)
    Eclipse
    VsCode支持的markdown语法参考(一)
    常用算法Tricks(一)
    dispose方法的使用
    收藏一个链接
    我还不知道取什么名字
    NioSocket的用法
    随便乱塞塞2~
  • 原文地址:https://www.cnblogs.com/hwgok/p/5716915.html
Copyright © 2011-2022 走看看