前端学习实践笔记--JavaScript深刻【3】

    这章主要讨论闭包和原型，以及面向对象和继承。

    闭包

    闭包充分利用了JS里面做用域的概念，做用域的好处是内部函数能够访问定义它们的外部函数的参数和变量。使用闭包主要是为了读取函数内部的变量或者将函数内部的变量始终保持在内存中，而不让JS垃圾回收机制回收，因此使用闭包会下降系统性能的，应该避免尽可能少用。

    具体看下面三个例子：

var elems = document.getElementsByTagName('a');
for(var i = 0; i<elems.length; i++){
    elems[i].addEventListener('click', function(e){
        e.preventDefault();
        console.log('i am click' +i);
    }, false);
}
for(var i =0; i< elems.length;i++){
    elems[i].addEventListener('click', (function(i){
        return function(e) {
            e.preventDefault();
            console.log('i am click' + i);
        }
    }(i)), false);
}

for(var i = 0; i < elems.length; i++){
    (function(i){
        elems[i].addEventListener('click', function(e){
            console.log("i am click" + i);
        },false)
    }(i));
}

   第一个例子确定有问题，输出的都是i am click11（总共有11个超连接），关键在于触发监听的时候，获取到的i是当前循环以后的变量i，因此值是11.

   第二个例子和第三个例子都是实现闭包，第三个例子比较直观易懂。这里还涉及到一个当即执行的函数概念。

   当即执行函数

   有两种写法，推荐第一种，以下代码所示，当即执行匿名函数，帮助封装一些方法，而且不留下任何全局变量，保护命名空间的干净，另外在闭包中也常用。

(function () {
    alert('hello world!');
}()); 

(function(){
    alert('hello world!');
})();

 还能够像匿名函数中传递参数，以下代码所示：固然若是你把一些插件的全局变量，例如JQuery，YUI,Global传进去，那就能够实如今他们插件的基础上扩展，并且不用担忧变量污染的问题。

(function(name){
    alert('hello world my name is '+name);
}('tonylp'));

 具体能够参考文章JavaScript学习笔记(十四) 当即执行函数

      原型

      原型在不少场合都会用到，尤为是面向对象方向。

      对于原型（prototype）记住它既是全部function类型的对象的一个属性，这个属性自己又是一个Object对象。（片面的说又是属性又是对象）。因此咱们能够给这个prototype对象添加任意的属性和方法，既然prototype是对象的“原型”，那么有该函数构造出来的对象应该都会具备这个“原型”的特性。也能够这么说，prototype提供了一群类对象共享属性和方法的机制。从这里能够看出可使用prototype在建立新对象的同时避免复制太多的东西占用内存。我能够只赋值新的变量，而使用公共的方法。还能够经过原型继承，实现原型链。

     以下代码经过原型实现基础的类，能够看到SayHello这个公用方法。

function Person(name) {
    this.name = name;
}

Person.prototype.SayHello = function(){
    alert("Hello i am" +this.name);
}
var BillGates = new Person("Bill Gates");
var SteveJobs = new Person("Steve Jobs");
BillGates.SayHello();
SteveJobs.SayHello();
aler(BillGates.SayHello() === SteveJobs.SayHello()); // true

    接下来展现一段原型链代码,object->person->employee,在SteveJobs调用SayHello的时候，首先遍历employee对象，里面没有此方法，而后经过Person.call(this,name),进入Person对象，找到该方法，而后输出，注意传入参数this和name。 其实这也是基于原型的继承，不是么

function Person(name) {
    this.name = name;
}

Person.prototype.SayHello = function(){
    alert("Hello i am" +this.name);
}

function Employee(name, salary){
    Person.call(this,name);
    this.salary = salary;
}
Employee.prototype.showMeTheMoney = function(){
    alert(this.name + "$" + this.salary);
};
var BillGates = new Person("Bill Gates");
var SteveJobs = new Employee("Steve Jobs", 2345);
BillGates.SayHello();
SteveJobs.SayHello();
SteveJobs.showMeTheMoney();
aler(BillGates.SayHello() === SteveJobs.SayHello()); // true

    都到这里了，必然能想到若是我在JS内置的对象上使用prototype，就能够扩展内置对象的方法或者属性了，是的，这条路是可行的。

    昨天说到一半的建立对象，接着继续，利用原型来建立对象。

    基于原型建立对象

    方法1，只使用原型，可是这个方法很差，由于把全部对象的属性也挂载到原型上了，太累赘，并且无法改。

var lev=function(){

    return "啊打";
};
function Parent(){


};
Parent.prototype.name="李小龙";
Parent.prototype.age="30";
Parent.prototype.lev=lev;

var  x =new  Parent();
alert(x.name);

  方法二，和函数结合，混合模型，这个比较好，属性和方法分离

function Parent(){
    this.name="李小龙";
    this.age=32;

};
Parent.prototype.lev=function(){

    return this.name;
};;

var  x =new  Parent();

alert(x.lev());

方法三，动态加载，其实就是混合模型，多加了一些判断，防止重复建立原型方法。

function Parent(){
    this.name="李小龙";
    this.age=32;
    ;
    if(typeof Parent._lev=="undefined"){


        Parent.prototype.lev=function(){

            return this.name;
        }
        Parent._lev=true;
    }

};

    说到原型，确定说到遍历，而后说到hasOwnProperty()方法，用来判断是不是函数自己的方法和属性，而不是原型链上的方法和属性，颇有用。看段简单的代码就能够了。

Object.prototype.bar = 1;
   var foo={moo : 1}
   for (var i in foo) {
     if(foo.hasOwnProperty(i)) {
       alert(console.log(i))
     }
   }//此时只会输出moo属性

     JS中主要大的概念都已经说完了，还剩下一个this指针，经过this仍是讲讲继承，还有AMD和CMD的一些简单介绍，JS里面的一些深坑，还有若是想继续往上深刻的一些方向，在下一篇文章中结束吧。以后打算看看一些插件的源码，主要的知识点概念就那些，其实这门语言也不难的，被各大浏览器厂商坑了，还有开发这门语言的人，留下了太多的深坑，总的来讲仍是颇有意思的，彻底不一样于C++，JAVA那套严谨的面向对象知识。

    话说大家用webstorm卡不卡，为何我用着这么卡呢。

    以上所有都属我的思想总结，请你们转载的时候附上原创连接： http://www.cnblogs.com/tonylp