函数的四种调用模式以及call()apply()和bind()

函数的四种调用模式

根据函数内部this的指向不同，可以将函数的调用模式分成4种

函数调用模式
方法调用模式
构造函数调用模式
上下文调用模式（借用方法模式）

函数：当一个函数不是一个对象的属性时，我们称之为函数。
方法：当一个函数被保存为对象的一个属性时，我们称之为方法。

函数调用模式

如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window

function fn(){console.log(this);//指向window
}
fn();

方法调用模式

当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象

var obj = {sayHi:function(){console.log(this);//在方法调用模式中，this指向调用当前方法的对象。}
}
obj.sayHi();

构造函数调用模式

如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。

function Person(){console.log(this);
}
Person();//this指向window
var p = new Person();//this指向p

总结：分析this的问题，主要就是区分函数的调用模式，看函数是怎么被调用的。

几种特殊的this指向

定时器中的this指向了window，因为定时器的function最终是由window来调用的。
事件中的this指向的是当前的元素，在事件触发的时候，浏览器让当前元素调用了function

上下文调用模式

上下文调用模式也叫方法借用模式，分为apply与call

使用方法：函数.call() 或者函数.apply()

call、apply、bind三者的异同

同：

call()、apply()和bind()都可以改变this指向
call()、apply()用法一样
call()、apply()都可以调用函数
call()、apply()都可以给函数传实参

异：

call()和apply()的传参写法不一样：
call(this对象,参数1,参数2,参数3)
apply(this对象,[参数1,参数2,参数3])
如果传的参数较少且不是数值或者为数组，适合call()
如果传的参数是数组或者是位数组，适合apply()
bind用法和call()、apply()都不一样，bind会克隆调用它的函数并通过第一个参数改变该函数的this，最后返回一个新函数（this改变），原函数this不变
// var newfn = fn.binde(this对象)

call方法

call方法可以调用一个函数，并且可以指定这个函数的this指向

//所有的函数都可以使用call进行调用
//参数1：指定函数的this，如果不传，则this指向window
//其余参数：和函数的参数列表一模一样。
//说白了，call方法也可以和()一样，进行函数调用，call方法的第一个参数可以指定函数内部的this指向。
fn.call(thisArg, arg1, arg2, arg2);

借用对象的方法

// call()练习：使用数组方法向位数组中添加属性,并且length属性也要相应改变
// 非严格模式下JS中分号是不必的，但在()、{}、[]前面必须有分号
var obj = {0: "马超",1: "关羽",2: "张飞",length: 3
};[].push.call(obj, "黄忠")
console.log(obj);//{0: "马超", 1: "关羽", 2: "张飞", 3: "黄忠", length: 4}

apply方法

apply()方法的作用和 call()方法类似，只有一个区别，就是apply()方法接受的是一个包含多个参数的数组。而call()方法接受的是若干个参数的列表

call和apply的使用场景：

如果参数比较少，使用call会更加简洁
如果参数存放在数组中，此时需要使用apply

// apply()练习：求数组中的最大值
var arr = [1, 33, 97, 22, 50, 88]
var res = Math.max.apply([], arr)
console.log(res);

bind方法

bind() 方法创建一个新的函数, 可以绑定新的函数的this指向

// 返回值：新的函数
// 参数：新函数的this指向，当绑定了新函数的this指向后，无论使用何种调用模式，this都不会改变。
var newFn = fn.bind(window);

// bind()练习
var ff = {name: "欧皓辰",lover: "池早早",sayLove: function () {// 如果不改变定时器里的this,结果this.lover=undefined,此定时器的this是window// 方法一：// var that = this 保存this到that中，定时器使用that（定时器的this改变为that）// 方法二：// this ==> ff// 用bind(this) 方法模式调用，此this是调用该方法的对象setInterval(function () {console.log("Dear" + this.lover + ", 我" + this.name + "，非常想你，想你想的睡不着");}.bind(this), 1000)}
}ff.sayLove();//Dear 池早早 , 我欧皓辰，非常想你，想你想的睡不着

函数的四种调用模式以及call()apply()和bind()相关推荐

函数的四种调用模式.上下文调用.call.apply
闭包:函数就是一个闭包,一个封闭的作用域; 返回函数,要返回多个函数就用一个对象封装一下, 立即执行函数+return 回调函数 JS动态创建的DOM,不会被搜索引擎抓取,对SEO不友好. /*win ...
JavaScript高级第2天：定义函数的三种方式、函数的原型链结构、完整原型链、作用域以及作用域链、函数的四种调用模式、闭包、计数器、斐波那契数列优化、三种继承方式
JavaScript高级第二天 01-定义函数的三种方式 1.函数声明 function:可以先调用再声明,因为预解析(把函数声明.变量声明进行提升) function fn() {//函数体conl ...
JavaScript中函数四种调用模式
目录 JS中函数的四种调用模式函数调用模式方法调用模式构造器调用模式上下文调用模式 JS中函数的四种调用模式在函数的调用模式中感觉最大的区别就是: this指向函数调用模式即通过函数名直 ...
【转】JavaScript中的this关键字使用的四种调用模式
http://blog.csdn.net/itpinpai/article/details/51004266 this关键字本意:这个.这里的意思. 在JavaScript中是指每一个方法或函数都会 ...
JavaScript中函数的四种调用方式（若有错误之处请斧正）
函数的几种调用方式一.一般形式函数的直接调用 fun(); 二.作为对象的方法调用 var obj = {name:"123",sayMyage:function(age){al ...
Javascript四种调用模式中的this指向
第一种:函数直接调用执行的模式 function add(a,b){ console.log(this); return a+b; } add(1,2) //this===window 这里的this ...
js高级04-- 沙箱模式、函数的4种调用模式（call()、apply()）、构造函数的return关键字
沙箱: <script>//沙箱//与外界隔绝的一个环境,外界无法修改该环境内任何信息,沙箱内的东西单独属于一个世界//360沙箱模式//将软件和操作系统进行隔离,以达到安全的目的//苹果 ...
java调用javascript函数_[Java教程]JavaScript函数的4种调用方法详解
[Java教程]JavaScript函数的4种调用方法详解 0 2016-08-09 00:00:12 在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C# ...
Android学习-Kotlin语言入门-变量、函数、语法糖、when、for-in、主构造函数、单例类、函数式API、集合遍历、隐式Intent、Activity生命周期、四种启动模式、标准函数
探究java语言的运行机制变量.函数.语法糖 when条件语句 for循环主构造函数.次构造函数数据类和单例类集合的创建与遍历集合的函数式API 创建菜单隐式使用Intent Activi ...