js 概念,闭包,call,apply,prototype等

时间:2021-03-28 18:37:21

1,类型

javascript 简单类型null,undefined,boolean,string,number,复杂类型为object。js是区分大小写的,不要Number, String, Object, Function等JavaScript内置函数混淆了。

 undefined:   代表一切未知的事物,啥都没有,无法想象,代码也就更无法去处理了。
                      注意:typeof(undefined) 返回也是 undefined。
                              可以将undefined赋值给任何变量或属性,但并不意味了清除了该变量,反而会因此多了一个属性

    null:            有那么一个概念,但没有东西。无中似有,有中还无。虽难以想象,但已经可以用代码来处理了。
                      注意:typeof(null)返回object,但null并非object,具有null值的变量也并非object。

    boolean:      是就是,非就非,没有疑义。对就对,错就错,绝对明确。既能被代码处理,也可以控制代码的流程。

    number:      线性的事物,大小和次序分明,多而不乱。便于代码进行批量处理,也控制代码的迭代和循环等。
                      注意:typeof(NaN)和typeof(Infinity)都返回number 。
                              NaN参与任何数值计算的结构都是NaN,而且 NaN != NaN 。
                              Infinity / Infinity = NaN 。

    string:         面向人类的理性事物,而不是机器信号。人机信息沟通,代码据此理解人的意图等等,都靠它了。

简单类型都不是对象,JavaScript没有将对象化的能力赋予这些简单类型。直接被赋予简单类型常量值的标识符、变量和参数都不是一个对象。

所谓“对象化”,就是可以将数据和代码组织成复杂结构的能力。JavaScript中只有object类型和function类型提供了对象化的能力。

(以上来自

悟透JavaScripthttp://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html

)

2,函数

 

   function myfunc()
    {
        alert(
"hello");
    };
    
    alert(
typeof(myfunc));


   运行之后可以看到typeof(myfunc)返回的是function。以上的函数写法我们称之为“定义式”的,如果我们将其改写成下面的“变量式”的,就更容易理解了:

    var myfunc = function ()
        {
            alert(
"hello");
        };
    
    alert(
typeof(myfunc));


    这里明确定义了一个变量myfunc,它的初始值被赋予了一个function的实体。因此,typeof(myfunc)返回的也是function。其实,这两种函数的写法是等价的,除了一点细微差别,其内部实现完全相同。也就是说,我们写的这些JavaScript函数只是一个命了名的变量而已,其变量类型即为function,变量的值就是我们编写的函数代码体。

第二种变量方式:

  var myfunc = function ()
        {
            alert(
"hello");
        };
    myfunc(); 
//第一次调用myfunc,输出hello
    
    myfunc 
= function ()
        {
            alert(
"yeah");
        };    
    myfunc(); 
//第二次调用myfunc,将输出yeah

第一种定义方式:

function myfunc ()
    {
        alert(
"hello");
    };
    myfunc(); 
//这里调用myfunc,输出yeah而不是hello
    
    
function myfunc ()
    {
        alert(
"yeah");
    };    
    myfunc(); 
//这里调用myfunc,当然输出yeah

两次调用都只是最后那个函数里输出的值!显然第一个函数没有起到任何作用。JavaScript执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的。而且,在同一段程序的分析执行中,定义式的函数语句会被提取出来优先执行。函数定义执行完之后,才会按顺序执行其他语句代码。也就是说,在第一次调用myfunc之前,第一个函数语句定义的代码逻辑,已被第二个函数定义语句覆盖了。所以,两次都调用都是执行最后一个函数逻辑了。

一段代码中的定义式函数语句会优先执行,这似乎有点象静态语言的编译概念。所以,这一特征也被有些人称为:JavaScript的“预编译”。

 大多数情况下,我们也没有必要去纠缠这些细节问题。只要你记住一点:JavaScript里的代码也是一种数据,同样可以被任意赋值和修改的,而它的值就是代码的逻辑。只是,与一般数据不同的是,函数是可以被调用执行的。

3,对象

 

var anObject = {};  //一个对象
    anObject.aProperty = "Property of object";  //对象的一个属性
    anObject.aMethod = function(){alert("Method of object")}; //对象的一个方法
    //主要看下面:
    alert(anObject["aProperty"]);   //可以将对象当数组以属性名作为下标来访问属性
    anObject["aMethod"]();          //可以将对象当数组以方法名作为下标来调用方法
    forvar s in anObject)           //遍历对象的所有属性和方法进行迭代化处理
        alert(s + " is a " + typeof(anObject[s]));


    同样对于function类型的对象也是一样:

    var aFunction = function() {};  //一个函数
    aFunction.aProperty = "Property of function";  //函数的一个属性
    aFunction.aMethod = function(){alert("Method of function")}; //函数的一个方法
    //主要看下面:
    alert(aFunction["aProperty"]);   //可以将函数当数组以属性名作为下标来访问属性
    aFunction["aMethod"]();          //可以将函数当数组以方法名作为下标来调用方法
    forvar s in aFunction)           //遍历函数的所有属性和方法进行迭代化处理
        alert(s + " is a " + typeof(aFunction[s]));


    是的,对象和函数可以象数组一样,用属性名或方法名作为下标来访问并处理。

   function类型的东西都是和object类型一样的东西,这种东西被我们称为“对象”。我们的确可以这样去看待这些“对象”,因为它们既有“属性”也有“方法”。

  JavaScript中也有this,但这个this却与C++、C#或Java等语言的this不同。一般编程语言的this就是对象自己,而 JavaScript的this却并不一定!this可能是我,也可能是你,可能是他,反正是我中有你,你中有我,这就不能用原来的那个“自我”来理解 JavaScript这个this的含义了。为此,我们必须首先放下原来对象的那个“自我”。

  在JavaScript函数中,你只能把this看成当前要服务的“这个”对象。this是一个特殊的内置参数,根据this参数,您可以访问到“这个”对象的属性和方法,但却不能给this参数赋值。在一般对象语言中,方法体代码中的this可以省略的,成员默认都首先是“自己”的。但JavaScript却不同,由于不存在“自我”,当访问“这个”对象时,this不可省略!

JSON对象:

  JSON的形式就是用大括“{}”号包括起来的项目列表,每一个项目间并用逗号“,”分隔,而项目就是用冒号“:”分隔的属性名和属性值。这是典型的字典表示形式,也再次表明了 JavaScript里的对象就是字典结构。不管多么复杂的对象,都可以被一句JSON代码来创建并赋值。

    其实,JSON就是JavaScript对象最好的序列化形式,它比XML更简洁也更省空间。对象可以作为一个JSON形式的字符串,在网络间*传递和交换信息。而当需要将这个JSON字符串变成一个JavaScript对象时,只需要使用eval函数这个强大的数码转换引擎,就立即能得到一个JavaScript内存对象。

new对象:

  除JSON外,在JavaScript中我们可以使用new操作符结合一个函数的形式来创建对象。例如:

    function MyFunc() {};         //定义一个空函数
    var anObj = new MyFunc();  //使用new操作符,借助MyFun函数,就创建了一个对象


    JavaScript的这种创建对象的方式可真有意思,如何去理解这种写法呢?
 
   其实,可以把上面的代码改写成这种等价形式:

    function MyFunc(){};
    
var anObj = {};     //创建一个对象
    MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数

我们就可以这样理解,JavaScript先用new操作符创建了一个对象,紧接着就将这个对象作为this参数调用了后面的函数。其实,JavaScript内部就是这么做的,而且任何函数都可以被这样调用!
 

4,作用域:函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

    function f1(){
    n=1;
  }

  f1();

  alert(n); // 1
    function f1(){    var n=1;  }  f1();  alert(n); // error

5,闭包:闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

前两年,微软在设计AJAX类库的初期,用了一种被称为“闭包”(closure)的技术来模拟“类”。其大致模型如下:

    function Person(firstName, lastName, age)
    {
        
//私有变量:
        var _firstName = firstName;
        
var _lastName = lastName;

        
//公共变量:
        this.age = age;

        
//方法:
        this.getName = function()
        {
            
return(firstName + " " + lastName);
        };
        
this.SayHello = function()
        {
            alert(
"Hello, I'm " + firstName + " " + lastName);
        };
    };
    
    
var BillGates = new Person("Bill""Gates"53);
    
var SteveJobs = new Person("Steve""Jobs"53);
    
    BillGates.SayHello();
    SteveJobs.SayHello();
    alert(BillGates.getName() 
+ " " + BillGates.age);
    alert(BillGates.firstName);     
//这里不能访问到私有变量

 很显然,这种模型的类描述特别象C#语言的描述形式,在一个构造函数里依次定义了私有成员、公共属性和可用的方法。特别是“闭包”机制可以模拟对私有成员的保护机制,做得非常漂亮。

    所谓的“闭包”,就是在构造函数体内定义另外的函数作为目标对象的方法函数,而这个对象的方法函数反过来引用外层外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法,就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束,临时变量的名称也都消失了,但在目标对象的方法内却始终能引用到该变量的值,而且该值只能通这种方法来访问。即使再次调用相同的构造函数,但只会生成新对象和方法,新的临时变量只是对应新的值,和上次那次调用的是各自独立的。的确很巧妙!

    但是前面我们说过,给每一个对象设置一份方法是一种很大的浪费。还有,“闭包”这种间接保持变量值的机制,往往会给JavaSript的垃圾回收器制造难题。特别是遇到对象间复杂的循环引用时,垃圾回收的判断逻辑非常复杂。无独有偶,IE浏览器早期版本确实存在JavaSript垃圾回收方面的内存泄漏问题。再加上“闭包”模型在性能测试方面的表现不佳,微软最终放弃了“闭包”模型,而改用“原型”模型。
 

 6,prototype

JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”,那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以这么说,prototype提供了一群同类对象共享属性和方法的机制。

 

   function Person(name)
    {
        
this.name = name;   //设置对象属性,每个对象各自一份属性数据
    };
    
    Person.prototype.SayHello 
= function()  //给Person函数的prototype添加SayHello方法。
    {
        alert(
"Hello, I'm " + this.name);
    }

    
var BillGates = new Person("Bill Gates");   //创建BillGates对象
    var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

    BillGates.SayHello();   
//通过BillGates对象直接调用到SayHello方法
    SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法

    alert(BillGates.SayHello 
== SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello,所以显示:true


    程序运行的结果表明,构造函数的prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的。显然,把方法设置到prototype的写法显得优雅多了,尽管调用形式没有变,但逻辑上却体现了方法与类的关系。

    在JavaScript中,prototype不但能让对象共享自己财富,而且prototype还有寻根问祖的天性,从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时,如果该对象自身不存在这样的属性或方法,就会去自己关联的prototype对象那里寻找;如果prototype没有,又会去prototype自己关联的前辈prototype那里寻找,直到找到或追溯过程结束为止。

    在JavaScript内部,对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时,也会同时将构造函数的prototype对象指派给新创建的对象,成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的,尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象,但并不建议这样做。内置的原型对象本身也是对象,也有自己关联的原型对象,这样就形成了所谓的原型链。

    在原型链的最末端,就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先,这个老祖宗实现了诸如toString等所有对象天生就该具有的方法。其他内置构造函数,如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的,但他们各自又定义了自身的属性和方法,从而他们的子孙就表现出各自宗族的那些特征。

    这不就是“继承”吗?是的,这就是“继承”,是JavaScript特有的“原型继承”。

 function Person(name)   //基类构造函数
 2     {
 3         this.name = name;
 4     };
 5     
 6     Person.prototype.SayHello = function()  //给基类构造函数的prototype添加方法
 7     {
 8         alert("Hello, I'm " + this.name);
 9     };
10     
11     function Employee(name, salary) //子类构造函数
12     {
13         Person.call(this, name);    //调用基类构造函数
14         this.salary = salary;
15     };
16     
17     Employee.prototype = new Person();  //建一个基类的对象作为子类原型的原型,这里很有意思
18     
19     Employee.prototype.ShowMeTheMoney = function()  //给子类添构造函数的prototype添加方法
20     {
21         alert(this.name + " $" + this.salary);
22     };
23 
24     var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象
25     var SteveJobs = new Employee("Steve Jobs"1234);   //创建子类Employee的SteveJobs对象
26 
27     BillGates.SayHello();       //通过对象直接调用到prototype的方法
28     SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法,关注!
29     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法
30 
31     alert(BillGates.SayHello == SteveJobs.SayHello); //显示:true,表明prototype的方法是共享的

7,call,apply

call和apply,它们的作用都是将函数绑定到另外一个对象上去运行

两者的格式和参数定义:

call( thisArg [,arg1,arg2,… ] ); // 参数列表,arg1,arg2,...

apply(thisArg [,argArray] ); // 参数数组,argArray

上面两个函数内部的this指针,都会被赋值为thisArg,这可实现将函数作为另外一个对象的方法运行的目的

区分apply,call就一句话,

  foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

 

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.

相同点:两个方法产生的作用是完全一样的

不同点:方法传递的参数不同

我们就上面的foo.call(this, arg1, arg2, arg3)展开分析.

foo是一个方法,this是方法执行时上下文相关对象,arg1, arg2, arg3是传给foo方法的参数.这里所谓的方法执行时上下文相关对象, 如果有面向对象的编程基础,那很好理解,就是在类实例化后对象中的this.

在JavaScript中,代码总是有一个上下文对象,代码处理该对象之内. 上下文对象是通过this变量来体现的, 这个this变量永远指向当前代码所处的对象中.

call, apply作用就是借用别人的方法来调用,就像调用自己的一样.

call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.

当参数明确时可用call, 当参数不明确时可用apply给合arguments