前
在进修运用Javascript之前，我的顺序猿生涯内里唯一打仗的编程言语是C#跟Java——疏忽当年在大学补考了N次的C与VB。
从静态编程言语，转到动态言语JS，刚开始的时刻，碰到不少难题与毛病。能够由于先入为主，在JS编程当中，每每情不自禁地以C#的逻辑、编程思绪、设想情势举行JS开辟。
时候长了，逐渐发明JS设想情势关于前端开辟的主要性，但在分享JS设想情势之前，愿望起首分享几点个人认为很主要的JS设想情势基本。有些处所，能够研讨得也不是很深切，有什么毛病的话，望斧正。
动态范例言语
静态范例言语，在编译阶段，就须要一定变量的范例。但动态范例言语，只需顺序运转时，依据当时言语实行环境，变量才会给予其范例。
所以C#，不能抛开runtime与编译器零丁运转，Java也离不开JVM。同时也有一大堆问题须要斟酌的，跨平台、范例转换、反射、Ioc、接口编程、抽象化、动态代办等等一大堆观点手艺的发作，还不是由于静态言语的强范例特征，须要更多的手腕让其取得天真多态的特征。
public class Main
{
public void Function()
{
//在编译的时刻，.net runtime必需要晓得dog是一只狗
Dog dog = new Dog();
Console.WriteLine(dog.Name);
}
}但，JS只须要个文本编辑器，没有编译经由过程不经由过程的观点，加载了浏览器就可以跑。
var a = 1;
console.log(typeof a);//number
a = "a";
console.log(typeof a);//string原型情势
ECMAScript 5之前JS是没有类的，W3C的大牛是有所发明的，所以ES6会新的类语法，然则各大浏览器（IE）猴年马月才跟进就不得而知了——相对不是针对IE。
在静态范例言语开辟中，类是恣意实体的组织，当须要这个实体的时刻，体系遵照这个组织，“画”出这个==对象==。
比如，要设想车，起首是要设想稿，设想稿就是类，然后照着设想稿临盆的每一台车就是细致的对象。
所以，静态范例言语当中，取得一个对象的最症结就是先有这个对象的设想稿（类），就是晓得它的范例。
然则，JS不一样。
JS是以原型情势作为设想基本。取得一个对象之前，我们不关心对象属于什么范例，它的设想稿是怎样的，JS是经由过程拷贝一个其他对象而取得对象的。
//定义超人是超人，超人能够飞
var superman = {
name: "superman",
fly: function () {
console.log(this.name + " is flying");
}
};
superman.fly();//superman is flying
//万一，想要个妹子呢，搞个女超人怎样？女超人也会飞？要不就复制一个超人的对象吧。
//经由过程Object.create复制一个超人，但定义它是女超人。
var superwomen = Object.create(superman);
superwomen.name = "superwomen";
superwomen.fly();//superwomen is flying
//DC的不喜欢，来个漫威吧，再搞个钢铁侠？钢铁侠也会飞
var ironman = Object.create(superman);
ironman.name = "ironman";
ironman.fly();//ironman is flying千万别误解了superman就是类，而superwomen、ironman就是superman实例化取得的对象，superman、superwomen、ironman都是对象，superwomen、ironman都是superman对象拷贝的效果。
1、一切的数据都是对象
上面的例子，经由过程var obj={}建立对象，其等价于var obj=new Object()。Object对象能够建立对象，但不仅是Object才是对象，一切的数据都是对象，包含Number、Boolean、String、Function、Object。这是原型情势很主要的一条准绳。
恰是这一点，我们也能够应用function定义对象：function obj(){};。
不过与var obj=new Object()差别，function定义的对象，是一个带组织器的函数，经由过程new症结字挪用组织器能够猎取其原型对象。参考以下例子。
//定义一个对象
var superman = {
name: "superman",
fly: function () {
console.log(this.name + " is flying");
}
};
superman.fly();//superman is flying
//定义一个函数，同时也是一个带组织器的函数
function superman2() {
this.name = "superman";
this.fly = function () {
console.log(this.name + " is flying");
};
};
//毛病：superman2是函数，fly()不是函数
superman2.fly();//error:undefined is not a function
//毛病：superman2()是挪用函数，但函数没有返回带fly()函数的对象
superman2().fly();//error:Cannot read property 'fly' of undefined
//准确：new不是C#实例化症结字，new是挪用superman2的组织器并返回其对象
var sm = new superman2();
sm.fly();//superman is flying2、对象的属性请求，会从对象通报到对象原型
当须要取得对象属性时，会起首请求对象自身，假如，对象自身没有属性能够相应，则相应其对象原型prototype；假如prototype也没有属性能够相应，则进一步请求原型的原型，从而构成一条原型链。固然，原型链的层级不能太长，细致长度没有研讨过，我认为3级也差不多了。
//定义人
function human() {
this.sexy = "male";
};
//定义一切好汉的原型
function heroBase() {
this.trait = "strong cool";
};
//好汉的原型是人
heroBase.prototype = new human();
//定义超人
function superman() {
this.fly = function () {
console.log("superman");
};
};
//超人的原型就是好汉
superman.prototype = new heroBase();
console.log(new superman().sexy);//male
console.log(new superman().trait);//strong cool这个步骤就是：
超人的性别是神马？
光看超人不晓得，要看超人原型：好汉
看好汉也不晓得，要看好汉原型：人
人的sexy属性通知我们，他是男子
好吧，或许你发明了，上面例子是有bug的，超人是外星人；但你一定发明了，这不就是继续吗？继续都有了，多态还能远吗？
3、JS就是经由过程原型情势完成继续的，且是单一继续
我个人的明白是，JS的继续跟C#的继续虽然完成情势差别，但有一点准绳是雷同的，单一继续非多继续。如上例子换成以下代码：superman.prototype = new heroBase();superman.prototype = new human();
终究效果是，超人的原型起首定为好汉，但又被人所覆蓋了。相符单一继续的准绳。
4、迥殊补充：关于__proto__与prototype的区分
之前一向认为搞懂了原型情势，近来看到一篇很好文章 [进修笔记] 小角度看JS原型链 梦禅，涨姿态了。
在 segmentfault 上看到如许一道问题：
var F = function(){};
Object.prototype.a = function(){};
Function.prototype.b = function(){};
var f = new F();问：f 能取到a,b吗？道理是什么？
症结明白：prototype是对象原型__proto__是对象组织器的原型
关于二者区分，引荐一遍博文，诠释异常细致，明白js中的原型链，prototype与__proto__的关联
本身列了例子，应当比较轻易明白
var F = function () { };
Object.prototype.a = function () {
console.log("a");
};
Function.prototype.b = function () {
console.log("b");
};
var f = new F();
//注重：对象的__proto__属性，指向对象的父级组织器的prototype原型
console.log(f);
console.log(f.__proto__); //F.prototype
console.log(F.prototype.__proto__); //Ojbect.prototype
console.log(Object.prototype.a()); //a
console.log(f.__proto__.__proto__.a()); //a
/****************************************************************/
console.log(f.constructor); //F
console.log(F.__proto__); //Function.prototype
console.log(Function.prototype.b()); //b
console.log(f.constructor.__proto__.b()); //b
//结论：一切对象的__proto__都指向其组织器的prototype
//结论：一切组织器/函数的__proto__都指向Function.prototype，它是一个空函数（Empty function）
//结论：Function.prototype的__proto__终究指向Object.prototype一切对象的__proto__都指向其组织器的prototype
一切组织器/函数的__proto__都指向Function.prototype，它是一个空函数（Empty function）
Function.prototype的__proto__终究指向Object.prototype
多态
JS的多态是经由过程两点完成的：1、原型情势完成继续；2、动态范例完成泛型
追念一下，我们刚进修C#的谁人典范例子
public class Hero
{
public virtual void Fly()
{
Console.WriteLine("hero fly");
}
}
public class SuperMan : Hero
{
public override void Fly()
{
base.Fly();
Console.WriteLine("SuperMan fly");
}
}
public class IronMan : Hero
{
public override void Fly()
{
base.Fly();
Console.WriteLine("IronMan fly");
}
}
public class Main
{
public void MainFunction()
{
LetsFly(new SuperMan());
LetsFly(new IronMan());
}
public void LetsFly(Hero hero)
{
hero.Fly();
}
}再来看看JS的完成
function superman() {
this.fly = function () {
console.log("superman fly");
};
}
function bird() {
this.fly = function () {
console.log("bird fly");
};
};
function letsFly(hero) {
hero.fly();
}
var sm = new superman();
var b = new bird();
letsFly(sm);//superman fly
letsFly(b);//bird fly;LetsFly()方法，C#跟JS接收的一样都是Hero这个对象
关于C#而言，LetsFly方法请求不管是神马Hero，只需完成了基类Hero的Fly，它就可以实行LetsFly方法，今后纵然有再多的好汉，继续Hero即可。
而JS，LetsFly方法请求不管是神马对象，只需有Fly方法，它就可以实行LetsFly方法，今后纵然有再多的好汉，好汉会Fly即可。
对照之下，优缺点是不言而喻的，前者遭到约束，尤其在庞杂范例之间继续与援用提现的越发凸显，但范例安全性高；
后者自由自在，但范例安全性低，如上例子，LetsFly传入的能够不是Hero，很多是Bird。
闭包与高阶函数
关于闭包“closure”，刚开始打仗的时刻，百度了N遍相干教程照样看得我一头雾水，
据说还会有内存泄漏的问题，好吧，在开辟中痛快就不必吧。直到有一天，偶然看到高阶函数，关于闭包以及全部JS言语的明白能够说发作了天翻地覆的变化。
在这之前，先给人人回忆一下，闭包之所以成为闭包之前，有一个很主要的前提观点：变量的生命周期。
在函数体内，var定义的变量，变量属于函数内，函数外没法访问；反之假如没有定义var的变量，像x=12，x属于全局变量。
全局变量的生命周期是永远的，由页面加载到封闭；而内部变量，从函数实行到完毕，GC检测到内部变量没有再被运用则会烧毁它。
var fn = function () {
var a = "a";
b = "b";
var fni = function () {
c = "c";
}();
}();
//console.log(a);//a is not defined
console.log(b);//b
console.log(c);//c症结就在这，假如内部变量在函数实行完毕后，依然有被运用呢？
解决方案就是——高阶函数。
高阶函数名字看起来高端，现实很简单，满足以下前提其一就是高阶函数：
1、函数的参数是函数；
2、函数的返回值是函数；
function myFunction() {
console.log("我是个函数");
};
//高阶函数1——函数的参数是函数
function fnHO1(fn) {
fn();
}
//高阶函数2——函数的返回值是函数
function fnHO2() {
return myFunction;
};
//挪用高阶函数1
fnHO1(myFunction);//我是个函数
//挪用高阶函数2
fnHO2();//神马都没有发作
//挪用高阶函数2，取得的是它的内部函数体
var f2 = fnHO2();
//再实行，才是挪用它的内部函数
f2();//我是个函数在高阶函数的基本，我们来看看，史上最典范的闭包实例。
function add_outer() {
var i = 1;
//返回值是内部函数，inner挪用了其外部的变量
//所以inner实行完毕时，i没有被烧毁
return function inner() {
i++;
return i;
};
};
//实行add_outer猎取的是它的内部函数体inner，但没有实行
var inner = add_outer();
//真正实行的时刻，变量i没有被烧毁，构成递增
console.log(inner());//2
console.log(inner());//3
console.log(inner());//4我关于闭包的明白很简单：==函数返回值是个内部函数，内部挪用了函数的内部变量==。
两个前提，缺一不可。假如将以上例子改一下，内部有函数，但不是返回值，就不是闭包了。
function add_outer() {
var i = 1;
//返回值不是函数，构成不了闭包
function inner() {
i++;
console.log(i);
};
inner();
};
//实行屡次，值也不会变
add_outer();//2
add_outer();//2或许人人会疑问，既然内部变量i在函数完毕后依然运用，致使GC没法接纳其内存，那不就是内存泄漏吗？
是的。实在我们反过来想，假如我们不运用闭包的体式格局完成以上累加的例子，改成运用全局变量寄存变量i，全局变量i是不是一样也是不能被接纳呢？！
//function add_outer() {
var i = 1;
function inner() {
i++;
return i;
};
//};
////实行add_outer猎取的是它的内部函数体inner，但没有实行
//var inner = add_outer();
//真正实行的时刻，变量i没有被烧毁，构成递增
console.log(inner());//2
console.log(inner());//3
console.log(inner());//4因而，闭包与高阶函数，只是函数式编程的编写体式格局，纵然并非形成内存泄漏的缘由。关于闭包与内存泄漏的问题，请移步 http://www.cnblogs.com/yakun/p/3932026.h…
原型情势、闭包与高阶函数应当能够说是JS设想情势的基本方法吧。鄙人一章，再分享一下JS的几种经常使用设想情势。
照样像前面所说的，有什么处所说错，望人人斧正。
