前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js重修课[三]:对象

js重修课[三]:对象

作者头像
星回
发布2018-08-02 15:17:59
6190
发布2018-08-02 15:17:59
举报
文章被收录于专栏:星回的实验室

这一章相对来说是部重头戏,看完之后才发现用了这么久的js,却很少有用真正OO的思想在写js代码……

继承

js面向对象的核心,相对C++和java,实现方式也比较纠结。一般js里创建对象有三种常用方法:

  • 1、对象直接量,如: var round = { x: 1, y: 1 };
  • 2、new关键字创建,如: var o = new Object(); var arr = new Array(); 这种方式调用构造函数,创建的对象将会继承构造函数的prototype对象属性,容后再表
  • 3、Object.create(),如: var arr = Object.create(Array.prototype); 该方法接受某个对象作为参数,创建的对象将以该对象作为原型,继承它的属性。

在以上三种方法中,直接量创建对象继承的是Object.prototype,而new的机制则比较有意思。在var foo = new Foo()这一句中,发生了以下几个行为:

  • 为新实例开辟一段空间
  • 将构造函数Foo()中的this指针改变为新建对象foo
  • 将foo.__proto__属性赋值为Foo.prototype,加入原型链

Object.create()方法的机制也类似。

原型链

知道继承的原理后,js中的原型链概念就好理解了。不同于C++中的多重继承,js只存在链式继承,也就是一个对象至多拥有一个父类。

画个图表示一下:

在通过var foo = new Foo();构建新对象后,Foo.prototype的值被赋给foo对象内自有属性__proto__,同时js内一切对象都继承自Object.prototype,因此这条原型链就是 foo ----> Foo.prototype ----> Object.prototype

同时,比较奇怪的是,foo的构造函数Foo()并没出现在这条原型链上。因为在定义function Foo()时,表示它是Function的一个实例,因此它继承自Function.prototype。这条原型链就是Foo ----> Function.prototype ----> Object.prototype

这两条可以通过instanceof运算符来验证。实践表明:Foo instanceof Function为true,而foo instanceof Function为false。

属性

存取器属性

js中的对象可以通过getter和setter方法来设置“存取器属性”,类似于C++和java里的私有属性。写法如下:

代码语言:javascript
复制
    var round = {
      x: 1,
      y: 1,
      get r() { 
        return Math.sqrt(this.x*this.x + this.y*this.y); 
      },
      set r(val) { 
        var oldVal = Math.sqrt(this.x*this.x + this.y*this.y);
        var ratio = val / oldVal;
        this.x *= ratio; 
        this.y *= ratio; 
      }
    }

以上是一个表示圆的对象。其中x和y是普通的数据属性,可以通过赋值语句直接操作其值,而r则为存取器属性。可以通过设置有无getter或setter来控制该属性的可读/可写性。之后操作该属性时写法和普通赋值相同:

代码语言:javascript
复制
    console.log(round.r);  //=>1.4142135623730951
    round.r = 2;
    console.log(round.r);  //=>1.9999999999999998
属性的特性

属性具有4个特性:

  • value: 属性的值
  • writable: 是否可写
  • enumerable: 是否可枚举。如果为false则在for/in循环中不会遍历该属性
  • configurable: 是否可配置。如果为false则不可修改属性特性

js提供了Object.defineProperty和Object.getPropertyDescriptor方法来修改和查询对象属性的特性。如下代码为round添加了一个只读属性“z”:

代码语言:javascript
复制
    Object.defineProperty(round, "z", {
      value: 0,
      writable: false,
      enumerable: true,
      configurable: true
    });

另外js还提供了hasOwnProperty方法来检测某个属性是自有属性还是继承属性。

内容还是蛮多的,待我在后面的章节中再消化一下……

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 继承
  • 原型链
  • 属性
    • 存取器属性
      • 属性的特性
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档