js高级之this完全解析

第一种, 作为普通函数调用

代码如下

<script>
console.log(window.xx);
function f1() {
this.xx=99;
}
f1();
console.log(window.xx);
// 结果为 undefined 99

// this的第一种调用方式(普通函数调用)
// this的值指向->window

// 准确的说, this为null,但被解释成window
// 在ecmascript5中, 如果this为null, 则解释成undefined

</script>

第二种,作为方法调用

代码如下

例1

<script>
var obj = {xx:999,yy:800,t:function () {
alert(this.xx);
}};
obj.t();

var dog = {xx:'wangwang'};
dog.t=obj.t;
dog.t();

// 作为对象的方法调用
// this指向方法的调用者, 即该对象,结果为 wangwang
</script>

例2

  <script>
var obj = {xx:999,yy:800,t:function () {
alert(this.xx);
}};

var dog = {xx:'wangwang'};
dog.t=obj.t;
show= function () {
alert('show'+this.xx);
}
dog.t=show;
console.log(show);
dog.t();
// 值为show wangwang
// 作为方法调用时, this指向其调用那一刻的调用者.
// 不管是被调用函数,声明时属于方法, 还是函数
</script>

第三种 通过构造函数调用

代码如下

<script>
// js中没有类的概念, 创建对象是用构造函数完成, 或者用json
// new dog() 发生了以下几件事
// 1. 系统创建空对象{} ,(空对象constructor属性指向dog函数)
// 2.把函数的this 指向 该空对象
// 3.执行该函数
// 4.返回该对象

// 结果为 i am huzi !

function dog(name,age) {
this.name=name;
this.age=age;
this.bark=function () {
alert('i am'+this.name +'!');
}
}
var objDog = new dog('huzhi',2);
objDog.bark();



</script>

第四种 通过apply, call调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

代码如下

var x = 0;
  function test(){
    alert(this.x);
  }
  var o={};
  o.x = 1;
  o.m = test;
  o.m.apply(); //0

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改为

o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o。

分享到