3.11JavaScript语言的对象(Object)、类(Class)、继承(Inheritance)

对象(Object)

1.对象字面量创建法

对象的字面量(literal)创建法是手动的写出对象的内容来创建一个对象的方法。

let objectName = {
  member1Name : member1Value,
  member2Name : member2Value,
  member3Name : member3Value
}

示例:

let person = {
  name : ['Bob', 'Smith'],
  age : 32,
  gender : 'male',
  interests : ['music', 'skiing'],
  bio : function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

一个对象由许多的成员组成,每一个成员都拥有一个名字(像上面的name、age),和一个值(如[‘Bob’, ‘Smith’]、32)。每一个名字/值(name/value)对被逗号分隔开,并且名字和值之间由冒号(:)分隔,所以可以把对象想象成哈希或散列。

对象成员的值可以是任意的,在我们的person对象里有字符串(string),数字(number),两个数组(array),两个函数(function)。前4个成员被称为对象的属性(property),后两个成员是函数,被称为对象的方法(method)。

此外,可以用一个对象来做另一个对象成员的值。

name : {
  first : 'Bob',
  last : 'Smith'
},

2.对象操作符new创建法

let objectName = new Object([arg1[, arg2[, ..., argN]]]);

使用new操作符创建 Object 的一个新实例,然后再给对象添加属性和方法。

let person = new Object();  
person.name = "张三";
person.age = 28;
person.sayName = function() {
  console.log(this.name);
};

3.访问对象属性和方法

objectName.propertyName
objectName.methodName()

类(Class)

类名遵循标识符的命名规则,一般PascalCase命名法。

类是“特殊的函数”,就像你能够定义的函数声明和函数表达式一样,定义类的方法有两种:类声明和类表达式。

不过,与函数声明不同的是,类声明不可以提升(hoist),其次,函数受函数作用域限制,而类受块作用域限制。

1.类声明定义法

类声明 是定义类的一种方法。要声明一个类,你可以使用带有class关键字的类名。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

2.类表达式定义法

类表达式 是定义类的另一种方法。类表达式与函数表达式一样,可以命名或不命名。

// 未命名/匿名类
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// 命名类
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 输出: "Rectangle2"

3.构造函数

使用 new 操作符创建类的新实例时,会同时调用constructor这个构造函数。

class Person {
  constructor() {
    console.log('person ctor');
  }
}

4.类方法

static 关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类,但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10,10);
p1.displayName;
// undefined
p1.distance;
// undefined

console.log(Point.displayName);
// "Point"
console.log(Point.distance(p1, p2));
// 7.0710678118654755

5.super关键字

super关键字用于访问和调用一个对象的父对象上的函数。

super([arguments]);
// 调用 父对象/父类 的构造函数

super.functionOnParent([arguments]);
// 调用 父对象/父类 上的方法
class Polygon {
  constructor(height, width) {
    this.name = 'Rectangle';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this._area = value;
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; // ReferenceError,super 需要先被调用!

    // 这里,它调用父类的构造函数的,
    // 作为Polygon 的 height, width
    super(length, length);

    // 注意: 在派生的类中, 在你可以使用'this'之前, 必须先调用super()。
    // 忽略这, 这将导致引用错误。
    this.name = 'Square';
  }
}
class Rectangle {
  constructor() {}
  static logNbSides() {
    return 'I have 4 sides';
  }
}

class Square extends Rectangle {
  constructor() {}
  static logDescription() {
    return super.logNbSides() + ' which are all equal';
  }
}
Square.logDescription(); // 'I have 4 sides which are all equal'

继承(Inheritance)

关键字 extends 用于子类单继承一个父类。

class ChildClass extends ParentClass { ... }

extends关键字用来创建一个普通类或者内建对象的子类。

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/basic/js/4729.html

发表评论

登录后才能评论