您的位置：首页 > Web前端 > JavaScript

js中this的理解

2016-08-29 15:40 225 查看

网上关于js中this的详解有很多，但是的确自己看了之后受益很深，所以我打算根据自己理解再写一篇，因为其中还有些自己不懂的，这样来加深一下印象。

关于this，平时我都是这样用的：

<body>
<div onclick="youClick(this)">12345</div>
<script type="text/javascript">
function youClick (obj) {
console.log(obj);
}
</script>
</body>

以前总是很简单的理解为this就是调用函数的那个对象，的确这样理解没有错，但是它有四种用法，分别是方法调用，函数调用，构造器调用和Apply调用。

1.方法调用。

方法感觉和函数很像，都是执行一定功能的代码片段，但是方法是指作为一个属性的函数。

<script type="text/javascript">
var myObject = {
value : 0,
func : function(n){
this.value += n;
}
};
myObject.func(1);
console.log(myObject.value);//1
myObject.func(2);
console.log(myObject.value);//3
</script>

方法可以使用this来访问自己所属的对象，所以它能对对象里的内容进行修改或者进行其他操作。

2.函数调用。

this在函数调用时被绑定为全局对象，举个例子：

var x = 0;
function test () {
this.x = 1;
}
test();
console.log(x);//1

来看看这段代码：

<script type="text/javascript">
var myObject = {
x : 0,
y : 0,
func : function(x,y){
var funX = function (x) {
this.x = x;
};
var funY = function (y) {
this.
c931
y = y;
};
funX(x);
funY(y);
}
};
myObject.func(1,2);
console.log(myObject.x);//0
console.log(myObject.y);//0
console.log(x);//1
console.log(y);//2
</script>

为什么是这个结果呢？我来解析一下，首先这里的this是通过函数调用的，所以这个this指的是全局对象也就是window，等于就是添加了全局变量，所以在调用myObject的func的方法时传进去的参数实际上是被赋值给了全局对象而不是myObject里的x和y，所以结果是这样子的。

那么怎么解决呢：

<script type="text/javascript">
var myObject = {
x : 0,
y : 0,
func : function(x,y){
var that = this;
var funX = function (x) {
that.x = x;
};
var funY = function (y) {
that.y = y;
};
funX(x);
funY(y);
}
};
myObject.func(1,2);
console.log(myObject.x);//0
console.log(myObject.y);//0
</script>

原理很简单就是在函数里调用this之前先把对象的this赋值给一个中间变量that，此时that就代表着myObject这个对象。

3.构造器调用。

构造器这个东西听起来有点懵逼，但是构造函数就很熟悉了，看代码吧：

<script type="text/javascript">
var x = 1;
function test(){
this.x = 0;
}
var obj = new test();
console.log(x);//1
</script>

不对啊，这明明是函数调用的this，为啥不是改变全局变量x的值呢，因为后面还有一句，道理是如果在一个函数前面带上new来调用，那么背地里将会创建一个连接到该函数的prototype成员的新对象，同时this会被绑定到那个新对象上，这里的this的值是test {x: 0}。

<script type="text/javascript">
var test = function (inc){
this.x = inc;
}
test.prototype.getX = function(){
console.log(this.x);//2
};
var obj = new test(2);
obj.getX();
</script>

这里的this指向test{x:2}，所以可以在新添加的方法中也可以获取x值，因为他们都属于对象test的一个属性。

4.apply调用。

apply是什么啊，我的天，还有Call，现在一并一说吧。

apply：

语法：apply([thisObj[,argArray]])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。如果没传进去参数则默认为全局对象。

<script type="text/javascript">
function funX (a,b) {
this.x = a;
this.y = b;
}
function funY(a,b,c) {
funX.apply(this,arguments);
this.z = c;
}
var f = new funY(1,2,3);
console.log(f.x + " " + f.y + " " + f.z);//1 2 3
</script>

然而我并没有给funY中的x和y赋值啊，这就要问apply了，apply能够劫持另外一个对象的方法，继承另外一个对象的属性，这个this就是funY(){}这个函数。

call：

call()与apply()功能一样，第二个参数形式不一样，call传递多个参数，是任意形式，apply第二个参数必须是数组形式例如：上面的代码用call写的话就是funX.apply(this,a,b,c)。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航