码迷,mamicode.com
首页 > Web开发 > 详细

js之this用法

时间:2017-09-07 13:22:32      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:应该   联系   alert   包装类   win   bind   大致   有一个   fun   

javascript中有一个知识点this   我们先看一个小程序  

var  x=10;

var obj={

   x:100,

  show:function foo(){

    console.log(this.x);

  }

}

var showx=obj.show;

showx();//10

看到这大家是不是觉得应该是100的,那么在看看下面稍作修改的程序:

var  x=10;

var obj={

   x:100,

  show:function foo(){

    console.log(this.x);

  }

}

obj.show();//100

这就是this的神奇之处,很多人都会搞错,下面咱们一起看看this的用法,大致有四种:

一,作为普通函数调用

我们知道, 在函数执行代码之前会初始化自己的作用域, 此时就有两个重要的角色生成, 一个是 this ,另一个是
‘arguments‘, 我们这次只讨论 this , 如果仅仅是函数的调用, 此时的 this 是指向 window 对象, 在严格模式下 this 是
undefined

(function() {console.log(this === window);}()); // true;
(function() {‘use strict‘; console.log(this === undefined);}()); //true

二,作为构造函数调用

当我们使用 new 操作符去调用一个对象的时候 this 指向实例化的对象, 这点比较常见, 此时最好不要去用 return 出一
个引用类型的值去替代 this 返回

function test(){ 

    this.x = 1; 

  } 

  var o = new test(); 

  alert(o.x); // 1 

三,作为对象的方法调用
在定义对象的时候, 如果某个键的值是 Function 类型我们称这样的键是方法, 当对象调用自己的方法时, 该方法内部的
this 便指向了对象自己

function test(){ 

    alert(this.x); 

  } 

  var demo= {}; 

  demo.x = 1; 

  demo.m = test; 

  demo.m(); // 1

这个程序相当于

var demo={

  x:1,

  m:function test(){

    alert(this.x)

  }

}

demo.m();//1

四,当调用apply, call, bind 时
这三种调用方式对 this 的影响是一样的, this 的具体指向和传入的第一个参数有关, 非严格模式下程序执行的时候会
对第一个入参进行一个类型转换, js 尝试将其转换成其对应的包装类型, 如果转化失败 this 就指向 window , 严格模式
下不进行转换, this 指向传入的第一个参数,如果用的是bind时,this就已经指定了,

let foo = function() {
console.log(this);
};
let obj = { a: 1 };
let bar = foo.bind(obj);
let oth = bar.bind({});
bar(), oth(); // {a: 1} {a: 1}

this的大致用法就这四种,可能还有其他的用法,如果有更好的用法可以联系我哦,我也可以及时作出修改

js之this用法

标签:应该   联系   alert   包装类   win   bind   大致   有一个   fun   

原文地址:http://www.cnblogs.com/zhengnini/p/7488762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!