前端开发HTML5——函数

20、函数的调用方式（内容尚未完全，可自行百度这方面的知识）

call()、apply()、bind() 这三个方法的作用都是改变执行环境中的this指针的指向

 

call()与apply()

这两个方法的第一个参数都为this指针指向的目标对象，他们的区别是第二个参数开始传参的方式不同

call传参：obj, arg2,arg3,.....

apply传参：obj, [arg2,arg3,..... ]

function func(a, b){

          return this.value + a + b;

}

          var obj = {

                    value: 1,

          };

          func.call(obj, 2, 3);   //6

          func.apply(obj, 2, 3);//6

          

          //call()和apply()如果第一个参数不是对象类型，那么这个参数会被自动转化为对象类型

          function func(){

               console.log(Object.prototype.toString.call(this));

          }

          func.call(2);

 

bind()

第一个参数为this指针指向的目标对象，bind方法执行后返回的是一个新函数

function func(){

　　console.log(this.name);

}

var obj = {

　　name: '张三',

}；

var f = func.bind(obj);

f();  //张三

//在这个新的函数对象中，this被永久的绑定到了bind的第一个参数上面，五六年后期这个函数被如何使用，this都不会改变

var obj27 = {

　　name: '李四',

　　f: f,

}；

obj2.f();  //张三

 

call()、apply()、bind()

如果这三个方法都没有提供第一个参数或者是参数是this、null、undefined中的一种，那么都将默认第一个参数的为Global对象

 

 

21、全局变量和局部变量

在函数内部声明的变量为局部变量，函数外部不能使用；

函数外部声明的变量为当前js文件的全局变量

如果没有var修饰的变量也为全局变量，这个变量在哪都可以访问

var a = 1;

function test(){

console.log(a);        //1

var b = 2;

console.log(b);       //2

} 

test();

console.log(a);       //1

console.log(b);       // b is not defined

 

当函数内部的变量和全局变量同名，函数内部就不会使用外部的变量

var g = 100;

function testG(){

console.log(g);          //undefined

var g = 200;

console.log(g);         //200

}

testG();

console.log(g);         //100

 

22、函数的属性和方法

1）length:表示函数希望接受的命名参数的个数 

function test(a, b){

　　return 'hello';

}

console.log(test.length);     //2   ---->形参的个数

test();

console.log(test());      //hello

 

2）函数作为参数 

function handle(fun){

　　var msg = "hello";

　　fun(msg);

}

handle(function(m){

　　console.log(m);           //hello

});

 

3）函数作为返回值 

function handle2(){

　　return function(){

　　　　console.log(123);

　　}

}

handle2();    //这返回的只是一个函数名

handle2()();            //123

 

23、值传递和引用传递

1）基本数据类型的传递就是值传递    不会影响上一个变量的值

var a = 1;

var b = a;

console.log(a, b);    //1 1

b = 3;

console.log(a, b);     //1 3

 

2）引用数据类型的传递就是址传递    两个变量的值会变成一模一样

var obj = {

name: 'zhangsan',

age:12,

};

var obj2 = obj;

console.log(obj, obj2);     // {name:'zhangsan',age:12,} {name:'zhangsan',age:12,}

obj2.gender = 'male';

console.log(obj, obj2);     //{name:'zhangsan',age:12, gender:'male',} {name:'zhangsan',age:12,gender:'male', }

 

24、闭包（函数访问上下文中的变量）

var arr = [];

for(var i = 0; i < 5; i++){

　　arr[i] = function(){

　　　　console.log(i);

　　}

}

arr[0]();     //5

arr[1]();     //5

arr[2]();     //5

arr[3]();     //5

arr[4]();     //5

上述现象就是闭包现象

解决方法将上面的arr[i]改为下面的arr[i]

arr[i] = (function(num){

　　return function(){

          console.log(num);

　　};

})(i);