前端开发HTML5——函数

2022-10-15,,

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); 

《前端开发HTML5——函数.doc》

下载本文的Word格式文档,以方便收藏与打印。