JS中this的指向以及call、apply的作用
在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下3种:
1、当函数作为普通函数调用时,this 指向全局对象
2、当函数作为对象的方法调用时,this 指向该对象
3、当函数作为构造器调用时,this 指向新创建的对象
示例一:
window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname
示例二:
var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob
示例三:
function Boy(name) { this.name = name; } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
对于示例三,还有一种特殊情况,就是当构造函数通过 "return" 返回的是一个对象的时候,此次运算的最终结果返回的就是这个对象,而不是新创建的对象,因此 this 在这种情况下并没有什么用。
示例四:
function Boy(name) { this.name = name; return { //返回一个对象 name: 'Jack' } } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Jack
示例五:
function Boy(name) { this.name = name; return 1; //返回非对象 } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
call 和 apply 的作用
apply 接受两个参数,第一个参数指定了函数体内 this 的指向,第二个参数是一个数组或类数组,用于传递被调用函数的参数列表。
示例一:
function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming
call 传入参数的数量是不固定的,跟 apply 相同的是,第一个参数也是用于指定函数体内 this 的指向,从第二个参数开始往后,每个参数被依次传入被调用函数。
示例二:
function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping
此外,大部分高级浏览器还实现了 bind 方法,它与 call 和 apply 的区别在于 bind 只是改变函数内部 this 的指向,但不会立即执行,你需要显示调用它。
示例三:模拟浏览器的 bind 方法
Function.prototype.bind = function(obj){ var self = this; return function(){ return self.apply(obj,arguments); } }; var obj = { name: 'Bob', age: 12 }; var func = function(){ console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); }.bind(obj); func('sing','shopping');
丢失的 this
在某些情况下会丢失 this 的指向,此时,我们就需要借助 call、apply 和 bind 来改变 this 的指向问题。
示例一:当 "getName" 方法作为 "boy" 对象的属性调用时,this 指向 "boy" 对象,当另外一个变量引用 "getName" 方法时,因为它是作为普通函数调用,所以 this 指向全局对象window
var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob var getBoyName = boy.getName; getBoyName(); //输出undefined
示例二:即使在函数内部定义的函数,如果它作为普通对象调用,this 同样指向 window 对象
var boy1 = { name: 'Bob', age: 12, getInfo: function() { console.log(this.name); function getAge() { console.log(this.age); } getAge(); } } boy1.getInfo(); //Bob //undefined
您可能感兴趣的文章:
- JavaScript中call和apply方法的区别实例分析
- JS中call和apply函数用法实例分析
- 详解JS中的this、apply、call、bind(经典面试题)
- 详解js中的apply与call的用法
- JavaScript中的apply()方法和call()方法使用介绍
- js中继承的几种用法总结(apply,call,prototype)
- JavaScript中的apply和call函数详解
- javascript中apply和call方法的作用及区别说明
- JS面向对象、prototype、call()、apply()
- JavaScript中apply与call的用法意义及区别说明
- javascript下arguments,caller,callee,call,apply示例及理解
- JavaScript函数apply()和call()用法与异同分析
- JS中的this指向问题以及apply、call、bind的使用
- js的this指针指向谁,以及相关的call、apply、bind方法
- javascript中apply方法和call方法的作用以及prototype.js中的应用
- js中改变this指向的三个常用方法bind,call和apply
- js call() apply() bind() -改变this指向
- js学习三、“普通”函数中的this,以及call,apply用法
- JS中改变this指向的方法(call和apply、bind)
- callee,caller,call()以及apply()的用法理解以及从中引申出的关于作用域跟this的理解
- callee,caller,call()以及apply()的用法理解以及从中引申出的关于作用域跟this的理解
- js改变this指向方法call,apply;jq改变this指向方法$.proxy()
- javascript中apply方法和call方法的作用以及prototype.js中的应用
- JS 中的this指向问题和call、apply、bind的区别
- javascript中apply方法和call方法的作用以及prototype.js中的应用
- js中this的改变指向的方法:call和apply、bind
- JS this,call和apply以及回调函数
- JS中改变this指向的方法(call和apply、bind)
- 函数中的this指向,以及 修改this指向的 call/apply/bind方法
- javascript中apply方法和call方法的作用以及prototype.js中的应用
- 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题
- JS的this总结(上)-call()和apply()