zoukankan      html  css  js  c++  java
  • 谈谈javascript中原型继承

    什么是继承?
    拿来主义:自己没有,别人有,把别人的拿过来使用或者让其成为自己的

     如何实现继承的方式

    • 原型继承
    • 混入继承
    • 经典继承

    1. 混入继承

    由于一个对象可以继承自任意的对象,即:o可以继承自对象o1,o2,o3...,所以,把这种继承称为:混入继承
    
    • 将其他对象中的成员加到自己身上
    • 对象可以继承自任意的对象
    var o1 = {name:"女娲", age: 1, gender: "female"};
    var o2 = {grade: "三年级二班", score: 100};
    
    // o2 继承 o1
    for ( var k in o1 ) {
      o2[k] = o1[k];
    }
    
    // 如果希望 o2 可以继承自任意的对象. 所以为了简化继承的代码
    // 给 o2 提供一个方法, 叫 extend
    o2.extend = function (obj) {
        for (var k in obj) {
            this[k] = obj[k];
        }   
    }
    
    o2.extend(o1);  // o2 继承 o1
    

    2 原型继承

    如果需要让一个对象拥有某些属性和方法,可以把这些属性和方法放到原型对象中,因为对象会继承自原型对象,所以就获得了该属性和方法。把这种继承方式称为:原型继承
    
    • 实现继承的方式
    1 利用对象的动态特性  添加成员
    2 覆盖原型对象        添加成员
    3 利用混入继承        添加成员
    
    • 原型的一些结论
    1 任何函数都可以作为构造函数
    2 函数默认就有一个 prototype 属性
    3 函数的prototype 就是 原型
    4 构造函数的prototype的类型是对象 
    5 通过构造函数创建出来的对象默认链接到构造函数的prototype中
    6 原型的成员(属性和方法)可以被对象共享
    

    2.1 原型继承实现方式

    • 1 利用对象的动态特性
    // 对象可以动态的添加属性
    var o = {};
    o.name = "川川";
    o.age = 19;
    o.gender = "男";
    
    // -----------------------
    function Person() {}
    
    // 将需要的属性添加到原型对象中
    Person.prototype.sayHi = function() {};
    
    var p = new Person();
    p.sayHi();
    
    • 2 覆盖原型对象
    Person.prototype = {
        sayHi: function() {},
        sayNo: function() {},
        sayYouAgin: function() {}
    };
    
    注意:
    使用覆盖原型对象方式实现继承的时候, 
    推荐给这个新对象添加一个 constructor 属性(属性的值为:当前的构造函数)
    目的是保持和 默认情况的原型结构一样(模拟对象的类型)
    
    但是如果对对象的类型要求不严格可以忽略
    
    constructor: Person
    
    • 3 利用混入继承添加原型成员
    对象2.extend( 对象1 )
    

    3 经典继承 - Object.create

    • 1 创建对象
    • 2 让创建出来的对象继承自参数对象
    诠释 继承是什么。
    
    ES5提供的方法(IE9+ 开始支持)
    提出者:Douglas Crockford(道格拉斯 克罗克福德) JSON作者 《JavaScript语言精粹》
    作用:实现继承,即:让一个对象(o2)继承自另外一个对象(o1)
    var o2 = Object.create( o1 );
    
    • 基本语法:
    var o1 = { 
        sayHi: function() {
            alert("hello,i am chuanchuan");
        }
    };
    
    var o2 = Object.create(o1);
    o2.sayHi();
    
    • 两种实现兼容的方式
    // 1 给原生对象添加成员
    if(!Object.create) {
        Object.create = function() {
            // 构造函数
            function F() {}
            // 继承
            F.prototype = obj;
            return new F();
        };
    }
    
    // 2 统一使用新方法(推荐)
    var create = function( obj ) {
        if ( Object.create ) {
            return Object.create( obj );
        } else {
    
            function F() {}
            F.prototype = obj;
            return new F();
        }
    }
  • 相关阅读:
    个人作业Week2-代码复审
    个人项目-数独
    个人作业-Week1
    第零次个人作业
    mysql统计某个指标之和大于指定值的记录
    Redis命令行查询缓存值
    Grep命令
    Log4j配置文件中指定日志路径
    Cadence OrCAD17.2禁止和启用start page的设置方法
    Linux内核实现透视---kthread_work
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5866573.html
Copyright © 2011-2022 走看看