前端开发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);