JavaScript 对象 类

本文地址

JavaScript 对象 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象。

JavaScript 基于 prototype，而不是基于类的。

基础概念

• JavaScript 拥有动态类型，同一变量可用作不同的类型
• Undefined 这个值表示变量不含有值
• Symbol 是 ES6 引入的一种原始数据类型，表示独一无二的值
• 非严格模式下，给未声明变量赋值，该变量将被作为 window 的一个属性

JavaScript 对象是属性变量的容器，对方的方法也是对象的一个属性。对象的方法定义了一个函数，并作为对象的属性存储。

// 遍历对象属性
var person = { name: "Bill", age: 56 };
for (x in person) {
    console.log(x)
}

typeof

typeof "John"                // string，注意都是小写字母
typeof 3.14                  // number
typeof false                 // boolean
typeof [1,2,3,4]             // object，注意返回值不是数组，而是对象
typeof {name:'John', age:66} // object

typeof function() {}         // function，表示可执行的代码块
typeof Symbol("foo")         // symbol，表示唯一的标识符

typeof undefined             // undefined
typeof null                  // object
typeof NaN                   // number，NaN(Not a Number) 是一个特殊的数值类型

typeof 666 === "number"      // typeof 的结果是字符串

new

声明变量时，可以使用 new 来声明其类型，但通常建议省略(new 的性能差)

var name =    new String;  // 值为 ""，注意都是大写字母开头，括号可以省略，也可以加上
var x =       new Number;  // 值为 0
var y =       new Boolean; // 值为 false
var cars =    new Array;   // 值为 []
var person =  new Object;  // 值为 {}

var arr1 = new Array('a', 'b', 'c'); 
var arr2 = ['a', 'b', 'c' ]; 

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

x === y  // 结果为 false，因为 x 是字符串，y 是对象

null 和 undefined

• undefined 表示未定义或者未赋值的变量或者属性
• null 和 undefined 的值相等，但类型不等
• null 用于对象, undefined 用于变量、属性、方法

var person           // 值为 undefined, 类型是 undefined
typeof person        // undefined，没有设置值的变量

typeof undefined     // undefined
typeof null          // object

null === undefined   // false
null == undefined    // true

// 检测对象是否已定义，必须先判断 undefined，否则会抛异常
if (typeof myObj !== "undefined" && myObj !== null) 

constructor

constructor 属性返回 JavaScript 变量的构造函数

"John".constructor          // function String()  { [native code] }
(3.14).constructor          // function Number()  { [native code] }
false.constructor           // function Boolean() { [native code] }
[1,2,3,4].constructor       // function Array()   { [native code] }
{name:'John'}.constructor   // function Object()  { [native code] }
new Date().constructor      // function Date()    { [native code] }
function () {}.constructor  // function Function(){ [native code] }

可以使用 constructor 属性来查看对象是否为数组

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

this

• 在对象方法中，this 表示该方法所属的对象
• 在函数中，this 默认表示全局对象；在严格模式下，this 是 undefined
• 单独使用时，this 表示全局对象；在浏览器中，window 就是该全局对象
• 在 HTML 事件中，this 表示接收事件的元素
• 函数对象的方法 call() 和 apply() 可以将 this 引用到任何对象

var person = {
    fullName: function () { return this.firstName; }
}
var qt = { firstName: "bqt" }

// 当使用 qt 作为参数调用 person 的方法时, this 将指向 qt, 即便它是 person 的方法
console.log(person.fullName.call(qt)); // bqt

创建对象

创建新对象有两种不同的方法：

• 使用 Object 定义并创建对象的实例
• 使用函数来定义对象，然后创建新的对象实例

使用 Object 创建对象

在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。

Object 构造函数，会根据给定的参数创建对象，具体有以下情况：

• 如果给定值是 null 或 undefined，将会创建并返回一个空对象。
• 如果传进去的是一个基本类型的值，则会构造其包装类型的对象。
• 如果传进去的是引用类型的值，仍然会返回这个值。
• 当以非构造函数形式被调用时，Object 的行为等同于 new Object()。

var o = new Object(true); // 等价于 o = new Boolean(true);

var person = new Object();
person.firstname="John";

使用函数创建对象

function person(firstname) {
    this.firstname = firstname; // 对象的属性

    this.changeName = function (name) { // 对象的方法
        this.firstname = name
    };

    function changeName2(name) { // 注意：这个不是对象的方法
        this.firstname = name;
    }
}

var xxx = new person("bqt");
xxx.age = 30; // 向已有对象添加新属性
xxx.changeName("bbb");
console.log(xxx.firstname + "-" + xxx.age) // bbb-30

类 class

ES6 引入了类和 class 关键字，但底层机制仍然基于原型继承。

• 类声明和类表达式的主体都执行在严格模式下
• 如果不定义构造方法，JavaScript 会自动添加一个空的构造方法
• 类中声明的方法不能加 function 关键字
• 函数声明会提升，类声明不会
• getter 和 setter 都在严格模式下执行，getter/setter 方法的名称不能与属性的名称相同
• 静态方法不能在对象上调用，只能在类中调用

class AI {
    constructor(site) { this._site = site; }
    length() { return this._site.length } // 不能加 function 关键字
    static hello() { return "Hello JS!"; }
}

class Runoob extends AI {
    constructor(name, site) {
        super(site)
        this._name = name;
    }

    length() { return this._name.length }
    get name() { return `qt-${this._name}` }
    set name(name) { this._name = `[${name}]` }
}

var bqt = new Runoob("bqt", "bqt.com")
console.log(bqt); // Runoob { _site: 'bqt.com', _name: 'bqt' }
console.log(bqt.length()); // 3

bqt.name = "aaa"
console.log(bqt.name);   // qt-[aaa]
console.log(AI.hello()); // 也可以使用 Runoob.hello()

2017-07-04