一、JavaScript中的函数

  在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向。

function fn(x,y,name){
var str1=x;
var str2=y;
  this.name=name;
function(){
alert(str1,str2);
}
}
fn(1,1,Admin);

  当调用fn(1,1,Admin)时,首先函数会创建一个活动对象,也叫做变量对象,接着为函数调用创建一个类似数组的arguments对象用于保存传入的参数,再为执行环境分配作用域链,初始化变量,将函数内部除了实参和函数声明有值外,都被初始化为undefined,最后为this关键字赋值,至此函数环境创建成功,成功后开始将形参逐个进行赋值,最后执行alert语句。

二、JavaScript中的this

  JavaScript中的this到底指向谁?!在不同的环境下this可以随时变换指向,是容易让人头晕的的概念。

  了解完函数执行环境的创建,再来看看函数中的this指向问题,在JavaScript中的函数既可以被当做普通函数执行,也可以被当做对象的方式执行,这是导致this指向丰富的原因之一。在主流的面向对象的语言中(例如Java,C#等),this含义是很明确的,就是指向当前对象。一般在编译期就已经绑定。而JavaScript中this是在运行期进行绑定的,这也会导致JavaScript中this具有多重含义。JavaScript中的this由于是在运行期进行绑定的,所以JavaScript中的this可以是全局对象、当前对象或者任意对象,这取决于函数的调用方式

  JavaScript中函数的调用有以下几种方式:作为构造函数调用,作为对象方法调用,作为函数调用,和使用apply()或call()调用。下面就要通过举例子来慢慢理解。

  1.作为构造函数调用

function Fn(a){
this.a=a; // this ?
}
var obj1=new Fn();
obj1.a; //
var obj2=Point();
obj2.a; //报错 obj2是一个空对象undefined
window.a; //

  当作为对象方法调用时,job1是根据构造函数创建的实例化对象,那么在构造函数中的this.a=1就指向了obj1,构造函数中的this都指向实例化对象。

  而obj2没有通过new的方式创建对象,所以obj2是一个空对象,obj2.a找不到,所以是undefined,即this.a相当于window.a。

  2.对象方法调用

var obj={
x:1,
fn:{
fn1:function (){
console.log(this.x);
}
}
}
obj.fn.fn1(); //undefined

  对象方法调用中的this指向包含它的对象,这里只需要注意一点,不用new方法创建的对象,其中的this只指向包含它的对象fn,并不会指向fn的父级obj。

  3.作为函数直接的调用

function fn() {
alert(this.a);
};
var a="";
fn();
div.onclick=function(){
  alert(this);
}

  函数fn()被调用时,开始给this赋值,首先判断this不是new出来的对象中的,所以不会指向实例化对象,然后也不是被某个元素调用的,所以最后将window赋值给它。

  在平时最常用的点击事件中,onclick事件是由div绑定的,所以在事件中,this就指向调用的元素,即指向div。

  4.使用call()和apply()进行调用

  call()和apply()的作用就是用来改变this指向,它们的第一个参数都是this要指向的对象。

function Fn(x){
this.x = x;
this.fn1= function(x){
this.x = x;
}
}
var obj1=new Fn(0);
var obj2={x: 0};
obj1.fn1.apply(obj2, [1]);
obj1.x; //0
obj2.x; //

  上面这段代码中,obj1是new出来的实例化对象,所以this指向实例化对象,即obj1,所以obj1.x的结果为0,而apply在执行函数fn1时改变了this指向,使它指向了obj2,所以obj1.fn1.apply(obj2,[1])实际上是相当于obj2.fn1(1),apply让obj1中的fn1方法赋值给了obj2,所以结果为1。

  三、总结

  通过这些例子的总结,大体可以总结出判断this的方法,如果使用new实例化的对象,那么函数中的this就指向实例化对象,如果不是new出来的对象,那就找是否是某个元素调用了这个函数,那么this就指向调用它的元素,如果不是以上两种情况,那么this就指向全局变量window,当然this指向都可以使用call()和apply()来进行改变。

  关于JavaScript中this的指向还有许多问题要慢慢理解,在不同的“场景”中有不同的变化,需要在平时多用多体会。以上就是我对JavaScript中this指向的理解,如有纰漏,还望指正。

  另外附上一篇大神翻译的文章作为结尾,关于this在具体使用时遇到的问题:http://www.cnblogs.com/yuanzm/p/4150558.html

  

  

Javascript中的this指向。的更多相关文章

  1. javascript中this的指向

    作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...

  2. JavaScript中 this 的指向

    很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...

  3. 前端面试之JavaScript中this的指向【待完善!】

    JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...

  4. JavaScript中的this指向

    this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...

  5. Javascript 中的this 指向的对象,你搞清楚了吗?

    Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...

  6. javascript中的this指向问题

    在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...

  7. 谈谈 JavaScript 中的 this 指向问题

    JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...

  8. JavaScript中this的指向问题

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...

  9. 轻松几句搞定【Javascript中的this指向】问题

    this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...

随机推荐

  1. ajax跨域问题及相关解决方案

    1 什么是跨域 所谓的跨域是指浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同: 2 什么时候会存在跨域的问题 页面访问不同源 ...

  2. js 星星效果思路

    //星星的效果思路 1.获取需要修改的元素 ul li 跟p 布局 2.给li 加移入事件 更改提示框显示, 3.给li 加移出事件 更改提示框隐藏 4.给li加索引值代表自己的序号 5.在li移入时 ...

  3. vue-i18n安装配置,运行

    需求:根据浏览器语言自动切换语言 1.安装vue-i18n, yarn安装 $ yarn add vue-i18n npm安装 $ npm install vue-i18n 2.导入语言包 src下创 ...

  4. postman+linux+pistache的http通信过程

    一.pistache配置 1.安装cmake[https://www.cnblogs.com/judes/p/10327638.html] 2.下载pistache[git:https://githu ...

  5. topcoder srm 570 div1

    problem1 link 找到周期,每个周期的增量是相同的. problem2 link 对于分给某一个公司的有$c$个联通分量,其中$k$个联通分量只有1个节点,$c$个联通分量一共有$x$个节点 ...

  6. HAProxy + Keepalived + Flume 构建高性能高可用分布式日志系统

    一.HAProxy简介 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代 理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点, ...

  7. Win32汇编学习(6):键盘输入消息

    这次,我们将要学习WINDOWS程序是如何处理键盘消息的. 理论: 因为大多数的PC只有一个键盘,所以所有运行中的WINDOWS程序必须共用它.WINDOWS 将负责把击键消息送到具有输入焦点的那个应 ...

  8. 聚合函数与F/Q表达式

    聚合函数 取名: field + __ + 聚合函数名字 ,如:price__avg:可传关键字参数修改名字:avg=Avg("price"): aggregate:不会返回一个  ...

  9. 线程(六)之LOCK和synchronized

    在java.util.concurrent.locks包中有很多Lock的实现类,常用的有ReentrantLock.ReadWriteLock(实现类ReentrantReadWriteLock), ...

  10. pycharm鸡火

    由于github被封杀,大虾把它挪到了gitee下面 /pengzhile/jetbrains-agent 主要是一个jar包,放在D:\Program Files\JetBrains\PyCharm ...