标签：代码量 script inter 通过 相同 function 语言 模拟 prototype
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();
属性值都是变化的，但方法是一样的。
让我们来创建一个工厂。
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();
标签：代码量 script inter 通过 相同 function 语言 模拟 prototype
原文地址：https://www.cnblogs.com/happyeveryuday/p/11840751.html
