zoukankan      html  css  js  c++  java

  • js如何实现继承

    js继承有5种实现方式：
    1、继承第一种方式：对象冒充
      function Parent(username){
        this.username = username;
        this.hello = function(){
          alert(this.username);
        }
      }
      function Child(username,password){
        //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
        //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
        //第二步：执行this.method方法，即执行Parent所指向的对象函数
        //第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
        this.method = Parent;
        this.method(username);//最关键的一行
        delete this.method;

        this.password = password;
        this.world = function(){
          alert(this.password);
        }
      }
      var parent = new Parent("zhangsan");
      var child = new Child("lisi","123456");
      parent.hello();
      child.hello();
      child.world();

    2、继承第二种方式：call()方法方式
      call方法是Function类中的方法
      call方法的第一个参数的值赋值给类(即方法)中出现的this
      call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

      function test(str){
        alert(this.name + " " + str);
      }
      var object = new Object();
      object.name = "zhangsan";
      test.call(object,"langsin");//此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str

      function Parent(username){
        this.username = username;
        this.hello = function(){
          alert(this.username);
        }
      }
      function Child(username,password){
        Parent.call(this,username);
        
        this.password = password;
        this.world = function(){
          alert(this.password);
        }
      }
      var parent = new Parent("zhangsan");
      var child = new Child("lisi","123456");
      parent.hello();
      child.hello();
      child.world();

    3、继承的第三种方式：apply()方法方式
      apply方法接受2个参数，
        A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
        B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数

      function Parent(username){
        this.username = username;
        this.hello = function(){
          alert(this.username);
        }
      }
      function Child(username,password){
        Parent.apply(this,new Array(username));
        
        this.password = password;
        this.world = function(){
          alert(this.password);
        }
      }
      var parent = new Parent("zhangsan");
      var child = new Child("lisi","123456");
      parent.hello();
      child.hello();
      child.world();

    4、继承的第四种方式：原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承
      function Person(){
      }
      Person.prototype.hello = "hello";
      Person.prototype.sayHello = function(){
        alert(this.hello);
      }
      
      function Child(){
      }
      Child.prototype = new Person();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
      Child.prototype.world = "world";
      Child.prototype.sayWorld = function(){
        alert(this.world);
      }
      
      var c = new Child();
      c.sayHello();
      c.sayWorld();

    5、继承的第五种方式：混合方式
      混合了call方式、原型链方式

      function Parent(hello){
        this.hello = hello;
      }
      Parent.prototype.sayHello = function(){
        alert(this.hello);
      }

      function Child(hello,world){
        Parent.call(this,hello);//将父类的属性继承过来
        this.world = world;//新增一些属性
      }

      Child.prototype = new Parent();//将父类的方法继承过来

      Child.prototype.sayWorld = function(){//新增一些方法
        alert(this.world);
      }

      var c = new Child("zhangsan","lisi");
      c.sayHello();
      c.sayWorld();

    JS继承之借用构造函数继承和组合继承

     

    根据少一点套路，多一点真诚这个原则，继续学习。

    借用构造函数继承

    在解决原型中包含引用类型值所带来问题的过程中，开发人员开始使用一种叫做借用构造函数
    (constructor stealing）的技术（有时候也叫做伪造对象或经典继承）。这种技术的基本思想相当简单，即
    在子类型构造函数的内部调用超类型构造函数。

    基本模式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function SuperType(){
      this.colors = ["red", "blue", "green"];
    }
    function SubType(){
       //继承了SuperType
      SuperType.call(this);
    }
    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors); //"red,blue,green,black"
    var instance2 = new SubType();
    alert(instance2.colors); //"red,blue,green"

    基本思想

    借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制（借用）到子类创建的实例中。因为this对象是在运行时基于函数的执行环境绑定的。也就是说，在全局中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。call 、apply方法可以用来代替另一个对象调用一个方法。call、apply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 　　

    所以，这个借用构造函数就是，new对象的时候(注意，new操作符与直接调用是不同的，以函数的方式直接调用的时候，this指向window，new创建的时候，this指向创建的这个实例)，创建了一个新的实例对象，并且执行SubType里面的代码，而SubType里面用call调用了SuperTyep，也就是说把this指向改成了指向新的实例，所以就会把SuperType里面的this相关属性和方法赋值到新的实例上，而不是赋值到SupType上面。所有实例中就拥有了父类定义的这些this的属性和方法。

    优势

    相对于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向超类型构造函数传递参数。因为属性是绑定到this上面的，所以调用的时候才赋到相应的实例中，各个实例的值就不会互相影响了。

    例如：

    复制代码
    function SuperType(name){
this.name = name;
}
function SubType(){
//继承了SuperType，同时还传递了参数
SuperType.call(this, "Nicholas");
//实例属性
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29
    复制代码

    劣势

    如果仅仅是借用构造函数，那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

    组合继承

    组合继承（combination inheritance），有时候也叫做伪经典继承。是将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。

    基本思想

    思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。

    基本模型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function(){
       alert(this.name);
    };
    function SubType(name, age){
    //继承属性
      SuperType.call(this, name);
      this.age = age;
    }
    //继承方法
    SubType.prototype = new SuperType();
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
    alert(this.age);
    };
    var instance1 = new SubType("Nicholas", 29);
    instance1.colors.push("black");
    alert(instance1.colors); //"red,blue,green,black"
    instance1.sayName(); //"Nicholas";
    instance1.sayAge(); //29
    var instance2 = new SubType("Greg", 27);
    alert(instance2.colors); //"red,blue,green"
    instance2.sayName(); //"Greg";
    instance2.sayAge(); //27

    优势

    组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JavaScript 中最常用的继承模式。

    劣势

    组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。虽然子类型最终会包含超类型对象的全部实例属性，但我们不得不在调用子类型构造函数时重写这些属性。

    　　

     To be continued...

    JS继承之原型继承

     许多OO语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。如前所述，由于函数没有签名，在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现的。  

                                                 --摘自《JavaScript高级程序设计》
    原型继承
    原型链是实现原型继承的主要方法，基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。
     
    实现原型链的基本模式：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function SuperType(){
     this.property=true;
    }
     
    SuperType.prototype.getSuperValue=function(){
      return this.property;
    }
     
    function SubType(){
      this.subproperty=false;
    }
     
    SubType.prototype=new SuperType();
    1
    SubType.prototype.getSubValue=function(){<br> return this.property;<br> }
    1
    var instance=new SubType();
    1
    instance.getSuperValue(); //true;

    例子中的实例及构造函数和原型之间的关系图：

    在例子代码中，定义了两个对象，subType和superType。

    两个对象之间实现了继承，而这种继承方式是通过创建SuperType的实例并将该实例赋给subType.prototype实现的。实现的本质就是重写了原型对象。

    这样subType.prototype中就会存在一个指针指向superType的原型对象。也就是说，存在superType的实例中的属性和方法现在都存在于subType.prototype中了。这样继承了之后，又可以为subType添加新的方法和属性。

    要注意，这个指针（[[prototype]]）默认情况下是不可以再被外部访问的,估计是会被一些内部方法使用的，例如用for...in来遍历原型链上可以被枚举的属性的时候，就需要通过这个指针找到当前对象所继承的对象。不过，Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__。

    原型继承需要注意的一些问题

    1.别忘记默认的类型

    我们知道，所有的引用类型都继承了Object，而这个继承也是通过原型链实现的。所以所有的对象都拥有Object具有的一些默认的方法。如

    ：hasOwnProperty()、propertyIsEnumerable()、toLocaleString()、toString()和valueOf()。

    2. 确定原型和实例的关系
    可以通过两种方式来确定原型和实例之间的关系。

    ①使用instanceof 操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回true。

    ②第二种方式是使用isPrototypeOf()方法。同样，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此isPrototypeOf()方法也会返回true。

    例子：

    复制代码
    alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true

alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true
    复制代码

    ③子类要在继承后定义新方法

    因为，原型继承是实质上是重写原型对象。所以，如果在继承前就在子类的prototype上定义一些方法和属性。那么继承的时候，子类的这些属性和方法将会被覆盖。

    如图：

    ④不能使用对象字面量创建原型方法

    这个的原理跟第三点的实际上是一样的。当你使用对象字面量创建原型方法重写原型的时候，实质上相当于重写了原型链，所以原来的原型链就被切断了。

     

    ⑤注意父类包含引用类型的情况

    如图：

    这个例子中的SuperType 构造函数定义了一个colors 属性，该属性包含一个数组（引用类型值）。SuperType 的每个实例都会有各自包含自己数组的colors 属性。当SubType 通过原型链继承了SuperType 之后，SubType.prototype 就变成了SuperType 的一个实例，因此它也拥有了一个它自己的colors 属性——就跟专门创建了一个SubType.prototype.colors 属性一样。但结果是什么呢？结果是SubType 的所有实例都会共享这一个colors 属性。而我们对instance1.colors 的修改能够通过instance2.colors 反映出来。也就是说，这样的修改会影响各个实例。

    原型继承的缺点(问题)

    ①最明显的就是上述第⑤点，有引用类型的时候，各个实例对该引用的操作会影响其他实例。

    ②没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。

    有鉴于此，实践中很少会单独使用原型继承。

    最近要回顾一下原生js的一些重要的基础知识点，秋招秋招。。。

    JavaScript面向对象与原型

    JavaScript面向对象与原型

    工厂模式：无法识别对象

    function createObject(name, age) { //集中实例化的函数
    　　var obj = new Object();
    　　obj.name = name;
    　　obj.age = age;
    　　obj.run = function () {
    　　　　return this.name + this.age + '运行中...';
    　　};
    　　return obj;
    }
    var box1 = createObject('Lee', 100); //第一个实例
    var box2 = createObject('Jack', 200); //第二个实例
    alert(box1.run());
    alert(box2.run()); //保持独立

    alert(typeof box1); //Object
    alert(box1 instanceof Object); //true

    构造函数(构造方法)：可以识别对象

    function Box(name, age) { //构造函数模式
    　　this.name = name;
    　　this.age = age;
    　　this.run = function () {
    　　　　return this.name + this.age + '运行中...';
    　　};
    }
    var box1 = new Box('Lee', 100); //new Box()即可
    var box2 = new Box('Jack', 200);

    alert(box1.run());
    alert(box1 instanceof Box); //很清晰的识别他从属于 Box

    构造函数的方法有一些规范：

    1.函数名和实例化构造名相同且大写，(PS：非强制，但这么写有助于区分构造函数和普通函数)；

    2.通过构造函数创建对象，必须使用 new 运算符。

    var o = new Object();
    Box.call(o, 'Jack', 200) //对象冒充调用
    alert(o.run());

    原型（共享）：创建的每个函数都有一个 prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototype 通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

    unction Box() {} //声明一个构造函数
    Box.prototype.name = 'Lee'; //在原型里添加属性
    Box.prototype.age = 100;
    Box.prototype.run = function () { //在原型里添加方法
    　　return this.name + this.age + '运行中...';
    };

    在原型模式声明中，多了两个属性，这两个属性都是创建对象时自动生成的。

    __proto__属性：是实例指向原型对象的一个指针，它的作用就是指向构造函数的原型属性 constructor 。通过这两个属性，就可以访问到原型里的属性和方法了。

    PS：IE 浏览器在脚本访问__proto__会不能识别，火狐和谷歌浏览器及其他某些浏览器均能识别。虽然可以输出，但无法获取内部信息。

    判断一个对象是否指向了该构造函数的原型对象，可以使用 isPrototypeOf()方法来测试。

    exp：alert(Box.prototype.isPrototypeOf(box)); //只要实例化对象，即都会指向

    原型模式的执行流程：
    1.先查找构造函数实例里的属性或方法，如果有，立刻返回；
    2.如果构造函数实例里没有，则去它的原型对象里找，如果有，就返回；

    虽然我们可以通过对象实例访问保存在原型中的值，但却不能访问通过对象实例重写原型中的值。

    var box1 = new Box();
    alert(box1.name); //Lee，原型里的值
    box1.name = 'Jack';
    alert(box.1name); //Jack，就近原则，
    var box2 = new Box();
    alert(box2.name); //Lee，原型里的值，没有被 box1 修改
    如果想要 box1 也能在后面继续访问到原型里的值，可以把构造函数里的属性删除即可 ，具体如下：
    delete box1.name; //删除属性
    alert(box1.name);
    如何判断属性是在构造函数的实例里，还是在原型里？可以使用 hasOwnProperty()函数来验证：

    alert(box.hasOwnProperty('name')); //实例里有返回 true，否则返回 false

     

    in 操作符会在通过对象能够访问给定属性时返回 true，无论该属性存在于实例中还是原型中。
    alert('name' in box); //true，存在实例中或原型中
    我们可以通过 hasOwnProperty()方法检测属性是否存在实例中，也可以通过 in 来判断实例或原型中是否存在属性。那么结合这两种方法，可以判断原型中是否存在属性。

    function isProperty(object, property) { //判断原型中是否存在属性
    　　return !object.hasOwnProperty(property) && (property in object);
    }

    var box = new Box();
    alert(isProperty(box, 'name')) //true，如果原型有

    为了让属性和方法更好的体现封装的效果，并且减少不必要的输入，原型的创建可以使用字面量的方式：

    function Box() {};
    Box.prototype = { //使用字面量的方式
    　　name : 'Lee',
    　　age : 100,
    　　run : function () {
    　　　　return this.name + this.age + '运行中...';
    　　}
    };

    使用构造函数创建原型对象和使用字面量创建对象在使用上基本相同，但还是有一些区别，字面量创建的方式使用 constructor 属性不会指向实例，而会指向 Object，构造函数创建的方式则相反。

    如果想让字面量方式的 constructor 指向实例对象，那么可以这么做：
    Box.prototype = {
    　　constructor : Box, //直接强制指向即可
    };

    原型对象不仅仅可以在自定义对象的情况下使用，而 ECMAScript 内置的引用类型都可以使用这种方式，并且内置的引用类型本身也使用了原型。

    alert(Array.prototype.sort); //sort 就是 Array 类型的原型方法
    alert(String.prototype.substring); //substring 就是 String 类型的原型方法
    String.prototype.addstring = function () { //给 String 类型添加一个方法
    　　return this + '，被添加了！'; //this 代表调用的字符串
    };
    alert('Lee'.addstring()); //使用这个方法

    PS：尽管给原生的内置引用类型添加方法使用起来特别方便，但我们不推荐使用这种方法。因为它可能会导致命名冲突，不利于代码维护。

    动态原型模式

    function Box(name ,age) { //将所有信息封装到函数体内
    　　this.name = name;
    　　this.age = age;
    　　if (typeof this.run != 'function') { //仅在第一次调用的初始化
    　　　　Box.prototype.run = function () {
    　　　　　　return this.name + this.age + '运行中...';
    　　　　};
    　　}
    }
    var box = new Box('Lee', 100);
    alert(box.run());

    PS：使用动态原型模式，要注意一点，不可以再使用字面量的方式重写原型，因为会切断实例和新原型之间的联系。

    寄生构造函数

    function Box(name, age) {
    　　var obj = new Object();
    　　obj.name = name;
    　　obj.age = age;
    　　obj.run = function () {
    　　　　return this.name + this.age + '运行中...';
    　　};
    　　return obj;
    }

    稳妥构造函数

    function Box(name , age) {
    　　var obj = new Object();
    　　obj.run = function () {
    　　　　return name + age + '运行中...'; //直接打印参数即可
    　　};
    　　return obj;
    }
    var box = Box('Lee', 100); //直接调用函数
    alert(box.run());

    继承：依靠原型链完成

    function Box() { //Box 构造
    　　this.name = 'Lee';
    }
    function Desk() { //Desk 构造
    　　this.age = 100;
    }
    Desk.prototype = new Box(); //Desc 继承了 Box，通过原型，形成链条
    var desk = new Desk();
    alert(desk.age);
    alert(desk.name); //得到被继承的属性
    function Table() { //Table 构造
    　　this.level = 'AAAAA';
    }
    Table.prototype = new Desk(); //继续原型链继承
    var table = new Table();
    alert(table.name); //继承了 Box 和 Desk

    在 JavaScript 里，被继承的函数称为超类型(父类，基类也行，其他语言叫法)，继承的函数称为子类型(子类，派生类)。继承也有之前问题，比如字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

    对象冒充(伪造对象、经典继承、借用构造函数)：解决引用共享和超类型无法传参的问题

    function Box(age) {
    　　this.name = ['Lee', 'Jack', 'Hello']
    　　this.age = age;
    }
    function Desk(age) {
    　　Box.call(this, age); //对象冒充，给超类型传参

    }
    var desk = new Desk(200);
    alert(desk.age);
    alert(desk.name);
    desk.name.push('AAA'); //添加的新数据，只给 desk
    alert(desk.name);

    组合继承：原型链+ 借用构造函数

    function Box(age) {
    　　this.name = ['Lee', 'Jack', 'Hello']
    　　this.age = age;
    }
    Box.prototype.run = function () {
    　　return this.name + this.age;
    };
    function Desk(age) {
    　　Box.call(this, age); //对象冒充
    }
    Desk.prototype = new Box(); //原型链继承
    var desk = new Desk(100);
    alert(desk.run());

    寄生组合继承

    function obj(o) {     //传递一个字面量函数
    　　function F() {}    //临时新建一个构造函数，用来存储传递进来的对象
    　　F.prototype = o;    //将o对象实例赋值给F构造的原型对象

    　　return new F();    //返回实例化后的构造函数
    }
    function create(box, desk) {
    　　var f = obj(box.prototype);
    　　f.constructor = desk;
    　　desk.prototype = f;
    }
    function Box(name) {
    　　this.name = name;
    　　this.arr = ['哥哥','妹妹','父母'];
    }
    Box.prototype.run = function () {
    　　return this.name;
    };
    function Desk(name, age) {
    　　Box.call(this, name);
    　　this.age = age;
    }
    inPrototype(Box, Desk); //通过这里实现继承
    var desk = new Desk('Lee',100);
    desk.arr.push('姐姐');
    alert(desk.arr);
    alert(desk.run()); //只共享了方法
    var desk2 = new Desk('Jack', 200);
    alert(desk2.arr); //引用问题解决
  • 相关阅读:
    cocos2d-x的初步学习七
    cocos2d-x的初步学习六
    cocos2d-x的初步学习五
    cocos2d-x的初步学习四
    net core or Linux
    XML序列化反序列化
    用NSoup解析HTML
    ubuntu 下的ftp安装及root身份远程配置
    Windows 10 子系统Linux重启(不重启Win10)
    C# HttpRequest 请求
  • 原文地址：https://www.cnblogs.com/libin-1/p/5820693.html
Copyright © 2011-2022 走看看