JavaScript 中的面向对象编程

介绍

JavaScript 是一个强大的面向对象编程语言，但是，并不像传统的编程语言，它采用一个以原型为基础的OOP模型，致使它的语法让大多数开发人员看不懂。另外，JavaScript 也把函数作为首要的对象，这可能会给不够熟悉这门语言的开发人员造成更大的困惑。那就是我们决定放在前面作为一个简短前言进行介绍的原因，并且在 JavaScript 里也可以用作面向对象编程的一个参考。

这个文档没有提供一个面向对象编程的规则预览，但有它们的接口概述。

 

命名空间

随着越来越多的第三方库，框架和web依赖的出现，JavaScript发展中的命名空间是势在必行的，我们得尽量避免在全局命名空间的对象和变量的冲突。

不幸的是，JavaScript没有提供支持命名空间的编译，但是我们可以使用对象来得到同样结果。在JavaScript中我们有许多种模式来实现命名空间接口，但是我们覆盖嵌套的命名空间，它在该领域是最常用的模式。

嵌套命名空间

嵌套的命名空间模式使用对象字面量来捆绑一个特定应用的特定名字的功能。

我们最初创建一个全局对象，并且赋值给一个称为MyApp的变量。

// global namespace
var MyApp = MyApp || {};

上述的语法会检查MyApp是否已经被定义过。假如它已经被定义过，我们简单地把它赋值给自己，但是，我们创建一个空的容器来装载我们的函数和变量。

我们也可以使用相同技术来创建子命名空间。例如：

// sub namespaces
MyApp.users = MyApp.user || {};

我们一旦启动我们的容器，我们可以在（容器）内部定义我们的函数和变量，并且在全局命名空间调用它们，不需要冒着与现有定义冲突的风险。

// declarations

MyApp.users = {

	existingUsers: '', // variable in namespace

	renderUsershtml: function() { // function in namespace

		// render html list of users

	}

};

// syntax for using functions within our namespace from the global scope

MyApp.users.renderUsersHTML();

在JavaScript命名模式的一个内部概述是由Goggle的Addy Osmani在Essential JavaScript Namespacing Patterns的文章中介绍的。假如你想探索不同的模式，这里将是一个美好的起点。

 

对象

如果你写过 JavaScript 代码，那你已经使用过对象了。JavaScript 有三种类型的对象：

原生对象

原生对象是语言规范的一部分，不管在什么样的运行环境下运行，原生对象都可用。原生对象包括：Array、Date、Math 和 parseInt 等。

var cars = Array(); // Array is a native object

宿主对象

与原生对象不同，宿主对象是由 JavaScript 代码运行的环境创建。不同的环境环境创建有不同的宿主对象。这些宿主对象在多数情况下都允许我们与之交互。如果我们写的是在浏览器（这是其中一种运行环境）上运行的代码，会有 window、document、location 和 history 等宿主对象。

document.body.innerHTML = 'Hello World!'; // document is a host object

// the document object will not be available in a 
// stand-alone environments such as Node.js

用户对象

用户对象（或植入对象）是在我们的代码中定义的对象，在运行的过程中创建。JavaScript 中有两种方式创建自己的对象，下面详述。

 

对象字面量

在前面演示创建命名空间的时候，我们已经接触到了对象字面量。现在来搞清楚对象字面量的定义：对象字面量是置于一对花括号中的，由逗号分隔的名-值对列表。对象字面量可拥有变量（属性）和函数（方法）。像 JavaScript 中的其它对象一样，它也可以作为函数的参数，或者返回值。

现在定义一个对象字面量并赋予一个变量：

// declaring an object literal

var dog = {

	// object literal definition comes here...

};

向这个对象字面量添加属性和方法，然后在全局作用域访问：

// declaring an object literal

var dog = {

	breed: 'Bulldog', // object literal property

	bark: function() { // object literal method

		console.log("Woof!");

	},

};

// using the object

console.log( dog.breed ); // output Bulldog

dog.bark(); // output Woof!

这看起来和前面的命名空间很像，但这并不是巧合。字面量对象最典型的用法就是把代码封装起来，使之在一个封装的包中，以避免与全局作用域中的变量或对象发生冲突。由于类似的原因，它也常常用于向插件或对象传递配置参数。

如果你熟悉设计模式的话，对象字面量在某种程度上来说就是单例，就是那种只有一个实例的模式。对象字面量先天不具备实例化和继承的能力，我们接下来还得了解 JavaScript 中另一种创建自定义对象的方法。

佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com

构造函数

定义构造函数

函数是 JavaScript 一等公民，就是说其它实体支持的操作函数都支持。在 JavaScript 的世界，函数可以在运行时进行动态构造，可以作为参数，也可以作为其它函数的返回值，也可被赋予变量。而且，函数也可以拥有自己的属性和方法。JavaScript 中函数的特性使之成为可以实体化和继承的东西。

来看看怎么用构造函数创建一个自定义的对象:

// creating a function

function Person( name, email ) {

	// declaring properties and methods using the (this) keyword

	this.name 	= name;
	this.email 	= email;

	this.sayHey = function() {

		console.log( "Hey, I’m " + this.name );

	};

}

// instantiating an object using the (new) keyword

var steve = new Person( "Steve", "steve@hotmail.com" );

// accessing methods and properties

steve.sayHey();

创建构造函数类似于创建普通函数，只有一点例外：用 this 关键字定义自发性和方法。一旦函数被创建，就可以用 new 关键字来生成实例并赋予变量。每次使用 new 关键字，this 都指向一个新的实例。

构建函数实例化和传统面向对象编程语言中的通过类实例化并非完全不同，但是，这里存在一个可能不易被察觉的问题。

当使用 new 关键字创建新对象的时候，函数块会被反复执行，这使得每次运行都会产生新的匿名函数来定义方法。这就像创建新的对象一样，会导致程序消耗更多内存。这个问题在现代浏览器上运行的程序中并不显眼。但随着应用规则地扩大，在旧一点的浏览器、计算机或者低电耗设备中就会出现性能问题。不过不用担心，有更好的办法将方法附加给构造函数（是不会污染全局环境的哦）。

方法和原型

前面介绍中提到 JavaScript 是一种基于原型的编程语言。在 JavaScript 中，可以把原型当作对象模板一样来使用。原型能避免在实例化对象时创建多余的匿名函数和变量。

在 JavaScript 中，prototype 是一个非常特别的属性，可以让我们为对象添加新的属性和方法。现在用原型重写上面的示例看看：

// creating a function

function Person( name, email ) {

	// declaring properties and methods using the (this) keyword

	this.name 	= name;
	this.email 	= email;

}

// assign a new method to the object’s prototype

Person.prototype.sayHey = function() {

	console.log( "Hey, I’m " + this.name );

}

// instantiating a new object using the constructor function

var steve = new Person( "Steve", "steve@hotmail.com" );

// accessing methods and properties

steve.sayHey();

这个示例中，不再为每个 Person 实例定义 sayHey 方法，而是通过原型模板在各实例中共享这个方法。

继承性

通过原型链，原型可以用来实例继承。JavaScript 的每一个对象都有原型，而原型是另外一个对象，也有它自己的原型，周而复始…直到某个原型对象的原型是 null——原型链到此为止。

在访问一个方法或属性的时候，JavaScript 首先检查它们是否在对象中定义，如果不，则检查是否定义在原型中。如果在原型中也没找到，则会延着原型链一直找下去，直到找到，或者到达原型链的终端。

现在来看看代码是怎么实现的。可以从上一个示例中的 Person 对象开始，另外再创建一个叫 Employee 的对象。

// Our person object

function Person( name, email ) {

	this.name 	= name;
	this.email 	= email;

}

Person.prototype.sayHey = function() {

	console.log( "Hey, I’m " + this.name );

}

// A new employee object

function Employee( jobTitle ) {

	this.jobTitle = jobTitle;

}

现在 Employee 只有一个属性。不过既然员工也属于人，我们希望它能从 Person 继承其它属性。要达到这个目的，我们可以在 Employee 对象中调用 Person 的构造函数，并配置原型链。

// Our person object

function Person( name, email ) {

	this.name 	= name;
	this.email 	= email;

}

Person.prototype.sayHey = function() {

	console.log( "Hey, I’m " + this.name );

}

// A new employee object

function Employee( name, email, jobTitle ) {

	// The call function is calling the constructor of Person
	// and decorates Employee with the same properties

	Person.call( this, name, email );

	this.jobTitle = jobTitle;

}

// To set up the prototype chain, we create a new object using 
// the Person prototype and assign it to the Employee prototype

Employee.prototype = Object.create( Person.prototype );

// Now we can access Person properties and methods through the
// Employee object

var matthew = new Employee( "Matthew", "matthew@hotmail.com", "Developer" );

matthew.sayHey();

要适应原型继承还需要一些时间，但是这一个必须熟悉的重要概念。虽然原型继承模型常常被认为是 JavaScript 的弱点，但实际上它比传统模型更强大。比如说，在掌握了原型模型之后创建传统模型简直就太容易了。

ECMAScript 6 引入了一组新的关键字用于实现类。虽然新的设计看起来与传统基于类的开发语言非常接近，但它们并不相同。JavaScript 仍然基于原型。