zoukankan      html  css  js  c++  java
  • Javascript知识汇总------面向对象的继承

    面向对象的特征就是封装性,继承性和多态性

      |  封装:就是将复杂包裹,隐藏起来,让简单的东西预留在外面
      |  继承:拿来主义,自己没用,把别人的拿过来,让其成为自己的东西

    1. 拷贝继承

    拷贝继承:分为继承属性继承方法两个部分

    function Person(name,sex){//父类
        this.name = name;
        this.sex = sex;
    }
    Person.prototype.showName = function (){
        console.log(this.name);
    }
    Person.prototype.num  = [1,2,3]
    var p1 = new Person('小明','男');
    function Child(name,sex,job){//子类
        Person.call(this,name,sex); //call则是改变Person函数内部this指向
        this.job = job
    }
    Child.prototype = Person.prototype //可以实现原型方法继承,但是引用类型不能用这种形式,方法(function)不会改变只会增加或者删减
    var p2 = new Child('小黄','男','学生')
    
    //* 在此改变p1的showName,p2的showName并不会改变,因为showName是方法,并不是引用类型
    p2.showName = function (){
        console.log('小黄');
    }
    p1.showName(); //小明
    p2.showName(); //小黄
    
    //* 在次改变p1的num的值,此处num为引用类型,引用类型值一旦改变,p1.num和p2.num都会改变
    p1.num.push(4);
    console.log(p1.num); //[1,2,3,4]
    console.log(p2.num); //[1,2,3,4]

    2. 原型继承

    如果需要让一个对象有某一个行为(属性,方法),那么可以把这个行为加到原型对象中,那么这个对象就继承自原型对象,获得该行为
    1)利用对象的多态性添加成员
    function Person(){};
    Person.prototype.sayHello = function (){};  //直接在Person构造函数的原型属性上添加成员,即多态性的展现
    var obj = new Person(); //在obj的原型对象中包含sayHello方法
    2) 利用覆盖原型对象
    function Person(){};
    var obj = new Person(); 
    console.log(obj.constructor) //Person  obj属于Person类
    Person.prototype = {
        sayHello : function (){},
        sayGoodBye : function (){},
        constructor : 'Person'   //若此处不声明constructor属性,obj属于Object类,因为obj原型对象被覆盖,constructor属性从原型对象的原型对象上获得,所以为Object
    };
    var obj = new Person(); 
    console.log(obj.constructor) //Person 
    3) 利用组合式继承添加原型成员
    function Person(){};
    Person.prototype.extend(obj) //此处obj代表需要被继承的对象

    3. 组合式继承

    组合是继承就是将其他对象中的成员加到自己身上
    var obj1 = {name:'wuxiaosui',age:18,sex:'nan'};
    var obj2 = {score:{
        math:90,
        english:120
    }};
    // for(var k in obj1){
    //     obj2[k] = obj1[k];
    // }
    Object.prototype.extent = function (obj){
        for(var k in obj){
            this[k] = obj[k];
        }
    }
    obj2.extent(obj1);  //将extend方法放置在Object构造函数原型上,调用的函数可以继承任意来自于其他对象的属性方法

     4.原型链结构

    var o1 = new Object();
    //o1原型链结构:o1 -> Object.prototype -> null

     o1原型结构图如下:

    function Person(){};
    var o2 = new Person();
    //o2原型链结构:o2 -> Person.prototype -> Object.prototype -> null

    o2原型链结构图如下:

     

  • 相关阅读:
    前端
    小程序开发
    mpvue开发小程序
    (33)Vue购物车
    Vue的使用你学会了吗?
    (32)Vue模板语法
    (31)Vue安装
    (3)Angular的开发
    (2)Angular的开发
    (1)Angular的开发
  • 原文地址:https://www.cnblogs.com/iwzyuan/p/8710229.html
Copyright © 2011-2022 走看看