JavaScript也支持面对对象编程,面对对象编程是一种设计思想,就是将对象作为程序的基本单位,而每个对象拥有自己的属性和方法。面对对象编程在函数的基础上又拔高了一个抽象维度,使用面对对象编程的有以下的优点:

  1. 提高软件开发的生产效率
  2. 使软件的可维护性更好
  3. 提高软件的质量

创建对象

你也可以简单地把对象理解为一种比较复杂的数据类型,在JavaScript中,数组就是对象,函数也是对象。那么我们能创建自己的对象吗?Of Course! 在JavaScript中可以直接使用 var 关键字来自定义对象:

var person = {
    firstName: "David",
    lastName: "Wang", 
    age: 23
};

这个叫 person 的对象中,有 firstName,lastName,age 三个属性,如果要调用其中的数值,可以直接通过以下代码触动:

console.log(person.firstName); // David
console.log(person.lastName); // Wang
console.log(person.age); // 23

可见一个对象相对于基础的数据类型更加复杂,每个对象都有属于自己的属性(attribute)和方法(method),比如一个人的身高、体重和年龄,这些都是属性,而吃饭、说活和睡觉都是方法。

我们再创建一个拥有方法的对象 dog,以下是这个对象的创建方法:

var dog = {
    name: "Doudou",
    greet: function() {
        console.log(this.name + ": " + "Wang Wang!");
    }
};

可以看到这个 dog 中有一个方法是 greet,调用这个方法能够把狗的名字打印出来,然后输出 Wang Wang:

dog.greet(); // Doudou: Wang Wang!

greet函数中有 this.name,意思就是指向这个对象自己,就是 dog.name,也就是 Doudou。除了上面这种直接创建对象的方式,我们也可以使用以下代码先创建对象,再逐步完善对象的属性和方法:

var dog = new Object();
dog.name = "Doudou";
dog.greet = function() {
    console.log(this.name + ": " + "Wang Wang!");
};
dog.greet(); // Doudou: Wang Wang!

要注意的是,如果我们没有赋予对象属性特定的数值,那么那个属性的默认值则是 undefined:

dog.age; // undefined

创建对象类型

上面的 person 和 dog 都是对象,是无法复用的。你可以将对象理解为具体的产品,如果我们想要使创建特定产品流水线化,我们则需要创建这些产品的设计蓝图,在蓝图中定义好对象的属性和方法,然后我们再根据蓝图创建出特定的对象。这种“蓝图”就叫做对象类型,在 JavaScript 可以使用 function 来定义,比如下面的 Person,为了将对象类型和函数区分开来,对象类型的首字母要大写:

function greetFunction() {
    console.log(`Hi, I am ${this.first_name} ${this.last_name}.`);
}

function Person(first_name, last_name) {
    this.first_name = first_name;
    this.last_name = last_name;
    this.greet = greetFunction;  
};

基于对象类型就能创建出特定的对象,记得使用 new 关键字,如下:

var person = new Person("David", "Wang");
person.greet(); // Hi, I am David Wang.

可见创建对象类型的好处就是,可以重复使用定义好的“蓝图”创建类似的对象,实现相同的功能。明白了这些关于对象的基本概念,我们接下来就来了解一下如何使用游览器中内置的对象。

游览器对象

游览器中有一些内置好的对象供我们直接使用,用于获取相相应的信息和资源。比如 window 对象指向当前游览器窗口,我们可以通过以下代码获取当前窗口宽度和长度。

console.log('width: ' + window.innerWidth + ', height: ' + window.innerHeight);

如果想要获取更多和游览器相关的信息,我们可以使用 navigator 对象:

console.log('appName = ' + navigator.appName);
console.log('appVersion = ' + navigator.appVersion);
console.log('language = ' + navigator.language);
console.log('platform = ' + navigator.platform);
console.log('userAgent = ' + navigator.userAgent);

如果我们要返回游览记录的上一页,我们可以使用 window.history 的 back 方法:

window.history.back();

我们也可以通过使用 window.location 查看当前网站的内容:

window.location.href;

window对象中有很多定义好的属性和方法,帮助我们使用许多有用的功能,关于更多与此章节相关的内容,大家可以参考以下的链接:

实践练习

创建一个Car对象类型,其中包含brand,model,year属性。这个类初始化的时候必须要传入品牌名字(比如Subaru),初始化的时候车的型号和生产年会被默认设定为’xxx’和0,Car类型中还需要用内置方法用于修改车型号和生产年,还有可以打印出完整车信息的方法。

请根据要求使用function定义出这个完整的对象类型,并使用此类型创建一个对象,然后使用内置方法修改车的型号和生产年,最后使用类的方法打印出车的完整信息。

答案请参见:这里