浅谈 js 面向对象

前言叙述（对象，类）

我们想来思考一个问题，对象是什么。简言之，包含属性和方法的就是对象。属性是静态的，通常写在构造函数中，方法是动态的，公用的，通常写在原型中。更严肃一点即“类的实例”。

var obj = new Object( )

obj 是对象，Object 是类。

对象是类的实例和具体，类是对象的集合。
举个例子：如果说类是女朋友的话，对象就是你的女朋友。
js中的四大内置对象，都是由类实例化的。
以上由ECMAScript 6底层规定如此。

工厂模式

来看一个简单案例，我们要创建一些数据信息，比如创建员工的信息。笨拙的方法是一个函数一个函数写。

//定义第一个人
var obj1 = new Object();
obj1.name = "小刚";
obj1.sex = "男";
obj1.age = "24";
obj1.interest = "网上冲浪";
obj1.sayHello = function(){
	alert(this.name);
}

//定义第二个人
var obj2 = new Object();
obj2.name = "小兰";
obj2.sex = "女";
obj2.age = "22";
obj2.interest = "吃火锅";
obj2.sayHello = function(){
	alert(this.name);
}

//定义第三个人
var obj3 = new Object();
obj3.name = "小梦";
obj3.sex = "男";
obj3.age = "29";
obj3.interest = "发呆";
obj3.sayHello = function(){
	alert(this.name);
}
//写不下去了。。。
obj1.sayHello();
obj2.sayHello();
obj3.sayHello();
//如果有1w个人的话，就要把以上代码写上上万遍。可摇了我吧。

属性值都是变化的，但方法是一样的。
让我们来创建一个工厂。

function factory(){
	var obj = new Object(name,sex,age,interest);
	obj.name = name;
	obj.sex = sex;
	obj.age = age;
	obj.interest = interest;
	obj.sayHello = function(){
		alert(this.name);
	}
	return obj;
}
var obj1 = factory("小刚","男","24","网上冲浪");
var obj2 = factory("小兰","女","22","吃火锅");
var obj3 = factory("小梦","男","29","发呆");

对比一下，通过封装，代码量减少了很多，整体也优雅了许多。这就是面向对象思想的一个小小体现。

构造函数

new后面就是构造函数，构造函数中的this就是指向当前对象。
var arr = new Array( );
以上：
对象=》arr，类=》Array。对象是由类所构造的。
所以：
Array( ) 即为构造函数。

还是以上案例，让我们变形一下。

function Factory(name,sex,age,interest){
	this.name = name;
	this.sex = sex;
	this.age = age;
	this.interest = interest;
	this.sayHello = function(){
		alert("你好"+this.name);
	}
}

var obj1 = new Factory("小刚","男","24","网上冲浪");//this指向 obj1
var obj2 = new Factory("小兰","女","22","吃火锅");//this指向 obj2
var obj3 = new Factory("小梦","男","29","发呆");//this指向 obj3

obj1.sayHello();
obj2.sayHello();
obj3.sayHello();

//构造函数中，首字母要大写

obj1 是 对象； Factory 是 类； Factory() 是构造函数。
普通函数封装后可以再new成构造函数。

js中四大内置对象同理。es6出现之前，前端中并没有类的概念，只讲对象和实例，只能通过以上的方法模拟类。es6出现之后就统一了江湖。现在又出现==.vue==,.scss,.ts,mvc等，都是由后台模拟过来。例如Java之前需要编译城javac。我们vue编译成html，scss编译成css，ts编译成js，这些语言的思想都是相似的。

原型

原型是用于存放公用的方法和属性的，让公用的方法和属性在内存中存在一份，提升性能。写于构造函数下。
js就是基于原型的对象。

直接来看一段笨拙的数组求和的代码。

var arr1= [1,2,4];
var arr2 = [3,3,4,5,6,8,9];
//数组求和
var sum1 = 0;
for(var i = 0;i<arr1.length; i++){
	sum1 += arr1[i];
}
console.log(sum1);

var sum2 = 0;
for(var i = 0;i<arr2.length; i++){
	sum2 += arr2[i];
}
console.log(sum2);

还是上面两个数组，再来封装一下

function sum(arr){
	var sum = 0; 
	for(var i = 0;i<arr.length; i++){
		sum2 += arr[i];
	}
	return sum;
}
console.log(sum(arr1));
console.log(sum(arr2));
//可以得到相同的结果

这是最普通的实现方式，下面让我们继续优化一下，使代码更加优雅。

还是上面两个数组。

Array.prototype.sum = function(){
	//this指向当前对象
	var sum = 0;
	for(var i = 0;i<this.length;i++){
		sum += this[i];
	}
	return sum;
}
console.log(arr1.sum);
console.log(arr2.sum);
//还是相同的结果

在这里，length便是公用的属性，求和就是方法。
基于此，未来出现数组求和都能实现。

再回到最开始关于添加人员的案例，我们只需要改动一句代码便可以使其变成原型。
原型写在构造函数后。

function Factory(name,sex,age,interest){
	this.name = name;
	this.sex = sex;
	this.age = age;
	this.interest = interest;
}

Factory.prototype.sayHello = function(){
	alert("你好"+this.name);
}

var obj1 = new Factory("小刚","男","24","网上冲浪");//this指向 obj1
var obj2 = new Factory("小兰","女","22","吃火锅");//this指向 obj2
var obj3 = new Factory("小梦","男","29","发呆");//this指向 obj3

obj1.sayHello();
obj2.sayHello();
obj3.sayHello();

感觉像（就是）是写出了底层代码。

最后

再回到最初说的“面向对象”。以上的案例都是面向对象思想的体现。
面向对象是一种思想，最后的原型是本博的精髓所在。
本篇博文简单的叙述了原型，有时间再具体谈谈关于原型的那些事。

如果那里说的不够完善，欢迎指正，感激不尽。