zoukankan      html  css  js  c++  java
  • JavaScript中对象的继承及扩展功能

    1 继承的概念

    在原型链中可以说一个对象是继承于它的原型对象的,所以继承是原型链的一种具体应用.

    当对象给它自身的属性和方法赋值时,会在内存空间中开辟一个位置存储这些属性和方法,但是每个对象都需要单独开辟空间的话,会极大的消耗内存影响网页的加载速度.

    原型对象中的方法和属性能够共享给实例使用,我们可以使用这个优点来实现内存的优化.而在这一系列实现过程就是继承.

    2 继承的具体实现方式

    1. 扩展原型对象

    指通过构造函数.prototype的方式给原型对象添加少量的新属性或者新方法.

    示例:

    function Student(){};//创建函数

    Student.prototype.say = function(){};//给原型对象添加say方法

    var s1 =new Student();//创建一个Student类型的对象

    s1.say();//等价于s1.__proto__.say();

    2. 替换原型对象

    在使用扩展原型对象方式来给原型对象添加多个新属性或者新方法时,就会出现冗余代码,这时我们就可以直接将原型对象替换成新的对象.

    替换原型对象就是直接使用一个新对象将原原型对象替换掉.

    示例:

    function Person (){};//创建函数
    Person.prototype={//给函数的原型对象赋值新的对象
      a:function(){},
      b:function(){},
      c:function(){},
      constructor:Person
    };
    var p1 =new Person();//创建一个Person类型的实例
    注意:新替换后的原型对象本身不再有constructor属性指向对应的构造函数了,所以我们需要在新对象中手动添加该属性和属性值.
    3. 混入继承

    将一个对象中的功能拷贝一份给另一个对象.

    示例:

    var p1 = {
      a:function(){},
      b:function(){}
    }//创建对象p1
    var p2 = {name:"sad"};//创建对象p2
    for(var key in p1){
      p2[key]=p1[key];
    }//将p1对象中的属性值逐个赋值给p2对象对应属性名

    注意:这个过程不改变原对象,目标对象将会获得新属性和方法,如果出现属性名或者方法名冲突的话,目标对象中的原属性或者方法会被替换成新的属性或者方法.

    4. 原型+混入继承

    原型+混入继承其实就是在混入继承的基础上将目标对象拓展成了原型对象,其他实现过程和结果不发生改变.

    示例:

    var p = {name:"",age:12};//创建对象p
    function Person(){};//创建函数
    for(var key in p){
      Person.prototype[key]=p[key];
    }//将p对象中的属性值逐个赋值给原型对象对应的属性名

    5. 经典继承

    创建一个对象继承自另一个对象.

    实现步骤:

    a 创建对象需要一个媒介,那就是构造函数,所以需要先创建一个构造函数

    b 设置这个函数的原型对象,使源对象替换原来的原型对象

    c 通过构造函数创建出新的实例对象,并将这个对象返回

    结合以上三个步骤我们可以封装成一个函数:

    function create(source){
      function fn(){};//自定义创建构造函数
      fn.prototype = source;//将源对象赋值给构造函数的原型对象
      return new fn;//使用构造函数创建新的实例,并返回
    }

    总结:继承功能的使用极大的避免了创建新对象时重复开辟内存空间,也可以减少全局变量的使用.

  • 相关阅读:
    mysql 中只能使用 localhost 登录,用ip不能登陆
    在springboot 和 mybatis 项目中想要显示sql 语句进行调试
    从一张表数据导入到另一张表
    mysql 中 delete 子查询的限制
    配置eureka 老是报错connected time out 或者 refused connected
    Linux-TCP 出现 RST 的几种情况
    MySQL-优化之 index merge(索引合并)
    Python-Mac 安装 PyQt4
    PHP-PHP-FPM的max_children一些误区
    Linux-磁盘及网络IO工作方式解析
  • 原文地址:https://www.cnblogs.com/chendu/p/5907520.html
Copyright © 2011-2022 走看看