面向对象

函数的定义和调用

函数的定义

1. 函数声明方式 function（命名函数）
2. 函数表达式 （匿名函数）
3. new Function('参数1','参数2',,,'函数体');

函数的调用

1. 普通函数

   function fun(){
       console.log('...');
   }
   fun();
   

2. 对象的方法

   var  o = {
       act : function(){
           console.log('...');
       }
   }
   o.act();
   

3. 构造函数

   function Star(){};
   new Star();
   

4. 绑定事件函数

   btn.onclick = function(){};

5. 定时器函数

   setInterval(function(){},1000);

6. 立即执行函数

   (function(){
       console.log('...');
   })();
   

this 指向

指向调用者

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象 原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

改变 this 指向

call() 、apply() 、 bind()

call()

function Father(uname,age){
    this.uname = uname;
    this.age = age;
    this.sex = sex;
}
function Son(uname,age){
    Father.call(this,uname,age);
}
var son = new Son('yuadh',21);

apply()

apply() 方法调用一个函数，可以改变函数的指向

fun.apply(thisArg,[argsArray])

• thisArg: 在fun函数运行时指向的 this 值
• argsArray： 传递的值，必须包含在数组里
• 返回值就是函数的返回值

var  = [1,66,3,99,4];
var max = Math.max.apply(Math,arr);
console.log(max);

bind()

不会调用函数，但是能够改变函数内部 this 指向

fun.bind(thisArg,arg1,arg2,,,,);

• thisArg: this值
• arg ： 参数

function fn(a,b){
    console.log(this);
    console.log(a+b);
}
var f = fn.bind(o,1,2);
f();

应用

var btns = document.querySelectorAll('button');
for(var i = 0; i < btns.length;i++){
    btns[i].onclick = function(){
        this.disabled = true;
        setTimeout(function(){
            //var  that = this; 不使用bind()函数的前解决方法
            this.disabled = flase;
        }.bind(this),2000)
    }
}