码迷,mamicode.com
首页 > 编程语言 > 详细

__x__(79)1016第十五天__ JavaScript 对象的继承

时间:2018-10-17 00:18:56      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:java   作用   构造函数   缺点   解决方法   继承   面向   也有   应该   

对象的继承

大部分面向对象的编程语言,都是通过“类”(class)实现对象的继承。

传统上,JavaScript 语言的继承不通过 class,而是通过“原型对象”(prototype)实现,称之为 JavaScript 的原型链继承

JavaScript 继承机制的设计思想就是,原型对象 prototype 的所有属性和方法,都能被实例对象共享

ES6 引入了 class 语法

  • 构造函数的缺点
    • 同一个构造函数的多个实例之间,无法共享属性,从而造成对系统资源的浪费
      • function Cat(name, color) {
            this.name = name;
            this.color = color;
            this.bar = function () {
                console.log(‘喵喵‘);
            };
        }
        
        var cat1 = new Cat(‘大毛‘, ‘白色‘);
        var cat2 = new Cat(‘二毛‘, ‘黑色‘);
        
        cat1.meow === cat2.meow    // false

        cat1 和 cat2 是同一个构造函数的两个实例,它们都具有 bar 方法。由于 bar 方法是生成在每个实例对象上面,所以两个实例就生成了两次。

    • 也就是说,每新建一个实例,就会新建一个 bar方法。这既没有必要,又浪费系统资源,因为所有 bar 方法都是同样的行为,完全应该共享
    • 这个问题的解决方法,就是 JavaScript 的原型对象(prototype)

 

  • JavaScript 的原型对象
    • JavaScript 继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享
    • 属性和方法定义在原型上,那么所有实例对象就能共享,不仅节省了内存,还体现了实例对象之间的联系
    • JavaScript 规定,每个函数都有一个 prototype 属性,指向一个对象。
      • 对于普通函数来说,该属性基本无用。但是,对于构造函数来说,生成实例的时候,该属性会自动成为实例对象的原型
        • function Animal(name) {
              this.name = name;
          }
          Animal.prototype.color = ‘white‘;
          
          var cat1 = new Animal(‘大毛‘);
          var cat2 = new Animal(‘二毛‘);
          
          cat1.color    // ‘white‘
          cat2.color    // ‘white‘

           

      • 原型对象的作用,就是定义所有实例对象共享的属性和方法。

 

    • 原型链
      • 当调用某对象的属性或者方法时,首先在自身作用域中寻找,然后到原型对象中寻找,再到原型对象的原型对象中寻找,直到找到 Object 。如果始终没找到就返回 undefined。
      • JavaScript 规定,所有对象都有自己的原型对象(prototype)。
        • 一方面,任何一个对象,都可以充当其他对象的原型;
        • 另一方面,由于原型对象也是对象,所以它也有自己的原型。
        • 因此,就会形成一个“原型链”(prototype chain):对象到原型,再到原型的原型……

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

__x__(79)1016第十五天__ JavaScript 对象的继承

标签:java   作用   构造函数   缺点   解决方法   继承   面向   也有   应该   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9800827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!