JavaScript 中的 this 用法以及 call(apply) 的理解
来源:互联网 发布:java岗位管理制度 编辑:程序博客网 时间:2024/06/05 06:13
this是什么
this是 JavaScript 中的一个关键字。它用在对象的方法中。this总是指向调用该方法的对象
this在对象的方法中
var obj = { name : 'object', sayName : function () { alert(this.name); }};obj.sayName(); // object
可以看出,当对象
obj
调用 sayName
这个方法时,this
指向的是 obj
。故 alert(this.name)
结果会是 object
。即,当 this
出现在对象的方法中时,执行该方法时 this
指向的是这个对象本身。this在函数中
var val='kk'; function hello(){ console.log('hello '+this.val);} var a={"val":"a","hello":hello},b={"val":"b","hello":hello}; hello();//hello kk a.hello();//hello a b.hello();//hello b
可以看出,this指向调用当前函数的对象,当在网页全局作用域中调用时,this对象引用的就是window。
this在构造函数中
var name = "global"; function Person () { this.name = "someone";}var sam = new Person(); alert(sam.name); // someone
以上代码很清楚的展示了构造函数中
this
的指向问题。当声明一个构造函数的实例时,构造函数内部的 this
都会指向新的实例。所以,在执行 var sam = new Person()
这条语句时, this
指向 sam
,所以此时 sam.name = "someone"
。call和apply是什么
call
方法应用于 Function
对象。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。apply和call两者在作用上是相同的,但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。如 func.call(func1,var1,var2,var3)
apply 写法为func.apply(func1,[var1,var2,var3])
call中传入对象
var sayName = function () { alert(this.name);}var peter = { name: "peter"}sayName.call(peter); //peter上面这个例子可以很直观地理解
call
的工作原理。也就是说,当在函数中调用 call
这个方法时,函数内部的 this
对象会自动指向 call
方法中的第一个参数。在上面这个例子中也就是 peter
这个对象了。所以在执行 sayName.call(peter)
时,函数内部的 this.name
则会自动指向 peter.name
。故最终结果为 peter
function Person1 () { this.name = "person1"; this.sayName = function () { alert(this.name); }}function Person2 () { this.name = "person2";}var sam = new Person2();Person1.call(sam);sam.sayName(); //person1以上例子中,最关键的是
Person1.call(sam)
这一步。我们来看看在里面究竟发生了什么事。当调用 call
这个方法时,函数 Person1
内部的 this
指向 sam
这个对象。相当于,给 sam
这个对象执行这两条语句:this.name = "person1"; this.sayName = function () { alert(this.name)}故在此重写了原来
sam
对象中的 name
属性。而且获得了一个新的方法。所以可以成功的调用 sam.sayName()
而且结果返回 person1
。call中传入函数
function class1 () { this.message = "yeah";}function class2 () { this.sayMessage = function () { alert(this.message); }}class2.call(class1); alert(class1.sayMessage); class1.sayMessage(); //undefined
上述例子中,我们调用了
class2
函数的 call
方法,传入了 class1
这个函数。结果 class1
拥有了 sayMessage
这个方法。但是直接调用这个方法返回的结果却是 undefined
而不是我们期望的 yeah
。这是为什么呢?为了搞清楚这里面的 this
指向,我们作如下修改:var message = "hi";function class1 () { this.message = "yeah";}function class2 () { this.message = "hello"; this.sayMessage = function () { alert(this.message); }}class2.call(class1); alert(class1.sayMessage); class1.sayMessage(); // helloclass1.message = "msg";class1.sayMessage(); //msg第一次调用
sayMessage
方法,返回 hello
。我们再来看一下 class2.call(class1)
这个过程。当执行这个方法时,class1
获得 class2
的 message
属性和 sayMessage
方法。所以此时有 class1.message = "hello"
,class1.sayMessage = function () {alert(this.message)}
。因此执行 sayMessage
时返回 hello
。当我们手动修改 class1.message
时,再调用这个方法,返回的值为我们修改的值。这证明了我们上面的推理是正确的。function class1 () { this.message = "yeah";}function class2 () { this.sayMessage = function () { alert(this.message); }}class2.call(class1); alert(class1.sayMessage); class1.sayMessage(); //undefined这个例子中并没有定义
class1.message
这个属性。所以执行 sayMessage
方法时,返回为未定义。有个比较容易混淆的地方是, class1
中定义的 this.message
并不是 class1.message
。而是 class1
的实例才拥有这个 message
属性。类似的例子还有下面这个:
function Class1(){ this.showTxt = function(){alert(this.name)}}function Class2(){ this.name = 'class2';}var class1 = new Class1(); class1.showTxt.call(Class2);//undefined alert(Class2.showTxt);//undefined
0 0
- JavaScript 中的 this 用法以及 call(apply) 的理解
- JavaScript 中的 this 用法以及 call(apply) 的理解
- 理解JavaScript中的this、call和apply
- javascript中的call(),apply()以及bind()的用法
- javascript 中的this call apply
- javascript中的this、apply、call
- callee,caller,call()以及apply()的用法理解以及从中引申出的关于作用域跟this的理解
- JavaScript的this, 以及function.call, function.apply
- JavaScript中this、apply()、call()的用法及解释示例
- Javascript中的this,call,apply,bind!
- Javascript中的this,call,apply,bind!
- Javascript中的this,call,apply,bind函数
- this call() apply()理解
- JavaScript中apply和call用法的理解
- JavaScript 中 call 、 apply 以及 bind 的用法
- Javascript apply, call this
- javascript 中的call函数的理解问题;apply
- 深入理解JavaScript中的call、apply、bind方法的区别
- C++primer学习笔记-----4.3逻辑和关系运算符
- 网络抓包工具Charles使用详解
- android开发-验证邮箱输入是否合法
- Density Peak改进(PCA/KNN)
- bzoj 4780: [Usaco2017 Open]Modern Art 2 (模拟)
- JavaScript 中的 this 用法以及 call(apply) 的理解
- ES6 箭头函数(=>)
- OracleDBA之表管理
- Libevent源码学习---bufferevent
- android 键盘遮挡解决办法
- js判断复选框是否全选
- 关于Thread的中断解释
- 基本概念
- jquery 简单分页