JS Class

JavaScript 语言中,生成实例对象的传统方法是通过构造函数

JavaScript语言中,生成实例对象的传统方法是通过构造函数。

由于这种语法与c++,java相差有点大,故ES6引入了

class这个语法糖。

class的功能在ES5中大部分都能做到

新的class写法让对象原型的写法更加清晰,更像面向对象的编程。

编程语法如下:

class pointer{

constructor(x,y){

    this.x = x;

    this.y = y;

}

toString(){

    return '(' '+ this.x + ',' + this.y)';

}

}

定义class的语法时,不需要加function,方法之间也不需要逗号隔开。

定义一个类,它的本质就是一个函数,类本身就指向一个构造函数.

事实上,类的所有方法都定义在类的prototype属性上。

在类的实例上调用方法,实际上是调用原型上的方法。

由于类的方法都在prototype对象上,所以类的新方法可以添加到这个对象上,

使用object.assign()方法可以快速向一个类添加多个新方法。

class Ponit{

    constructor(){


    }

}

Object.assign(Point.prototype,{

    tovalue(){


    }

})

类内部定义的所有方法都是不可枚举的,类外部定义的方法就是可枚举的。

var Point = function (x, y) {

  // ...

};

Point.prototype.toString = function() {

  // ...

};

Object.keys(Point.prototype)

// ["toString"]

Object.getOwnPropertyNames(Point.prototype)

// ["constructor","toString"] 

//Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

类的属性名,可以采取表达式。

let methodName = 'getArea';

class Square {

  constructor(length) {

    // ...

  }

  [methodName]() {

    // ...

  }

}

严格模式

类和模块内部,默认就是严格模式

方法

constructor()

与JAVA等语言很像,每一个类都必须有一个构造方法(即constructor)

如果没有显式定义,则会生成一个默认构造函数。

constructor()方法默认返回实例对象(this),但是也可以指定返回另外一个对象。

class Foo {

  constructor() {

    return Object.create(null);

  }

}

new Foo() instanceof Foo

// false

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。

类必须要new调用,这是与普通构造函数的区别。

类的实例对象

类的属性除非是显式定义在其本身上(即this对象上),否则都定义在原型上。

与ES5一样,类的所有实例公用一个原型对象。

var p1 = new Point(2,3);

var p2 = new Point(3,2);

p1.__proto__ === p2.__proto__

//true

2、hasOwnProperty 

上面代码中,p1和p2都是Point的实例,它们的原型都是Point.prototype,所以__proto__属性是相等的。

这也意味着,可以通过实例的__proto__属性为“类”添加方法。

__proto__ 并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。生产环境中,我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型,然后再来为原型添加方法/属性。

var p1 = new Point(2,3);

var p2 = new Point(3,2);

p1.__proto__.printName = function () { return 'Oops' };

p1.printName() // "Oops"

p2.printName() // "Oops"

var p3 = new Point(4,2);

p3.printName() // "Oops"

上面代码在p1的原型上添加了一个printName方法,由于p1的原型就是p2的原型,因此p2也可以调用这个方法。而且,此后新建的实例p3也可以调用这个方法。这意味着,使用实例的__proto__属性改写原型,必须相当谨慎,不推荐使用,因为这会改变“类”的原始定义,影响到所有实例。

hasOwnProperty判断一个对象是否有名称的属性或对象,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。 

如果该属性或者方法是该 对象自身定义的而不是器原型链中定义的 则返回true;否则返回false; 

class也可以写成一个表达式:

const MyClass = class Me {

  getClassName() {

    return Me.name;

  }

};

上面代码使用表达式定义了一个类。需要注意的是,这个类的名字是MyClass而不是Me,Me只在 Class 的内部代码可用,指代当前类。

et inst = new MyClass();

inst.getClassName() // Me

Me.name // ReferenceError: Me is not defined

上面代码表示,Me只在 Class 内部有定义。

变量提升

ES6的类与ES5不同,它不存在变量提升。

不存在变量提升的原因与下文的继承有关。

私有方法

ES6目前还不提供私有方法。

但有三种变通的方式可以实现私有方法:

1.一种做法是在命名上加以区别。

class Widget {

  // 公有方法

  foo (baz) {

    this._bar(baz);

  }

  // 私有方法

  _bar(baz) {

    return this.snaf = baz;

  }

  // ...

}

上面代码中,_bar方法前面的下划线,表示这是一个只限于内部使用的私有方法。但是,这种命名是不保险的,在类的外部,还是可以调用到这个方法。

另一种方法就是索性将私有方法移出模块,因为模块内部的所有方法都是对外可见的。

class Widget {

  foo (baz) {

    bar.call(this, baz);

  }

  // ...

}

function bar(baz) {

  return this.snaf = baz;

}

上面代码中,foo是公有方法,内部调用了bar.call(this, baz)。这使得bar实际上成为了当前模块的私有方法。

还有一种方法是利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值。

const bar = Symbol('bar');

const snaf = Symbol('snaf');

export default class myClass{

  // 公有方法

  foo(baz) {

    this[bar](baz);

  }

  // 私有方法

  [bar](baz) {

    return this[snaf] = baz;

  }

  // ...

};

上面代码中,bar和snaf都是Symbol值,导致第三方无法获取到它们,因此达到了私有方法和私有属性的效果。????

私有属性的提案

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容