Js中的this指向问题
函数中的this指向和当前函数在哪定义的或者在哪执行的都没有任何的关系
分析this指向的规律如下: [非严格模式]
1、自执行函数中的this永远是window
[案例1]
var obj={
fn:(function(i){
//this->window
return function(){
//this->obj
}
})(0)
};
obj.fn(); 2、给元素的某个行为绑定一个方法,当行为触发的时候,执行绑定的方法,此时方法中的this是当前的元素
[案例1]
oDiv.onclick=function(){
//this->oDiv
}; [案例2]
function fn(){
//this->window
}
oDiv.onclick=function(){
//this->oDiv
fn();
}; 3、方法执行,看方法名前面是否有".",有的话,"."前面是谁this就是谁,没有的话this就是window
[案例1]
var obj={fn:fn};
function fn(){}
fn.prototype.aa=function(){};
var f=new fn; fn();//this->window
obj.fn();//this->obj
fn.prototype.aa();//this->fn.prototype
f.aa();//this->f
f.__proto__.aa();//this->f.__proto__->fn.prototype 4、在构造函数模式中,函数体中的this.xxx=xxx中的this是当前类的一个实例
[案例1]
function Fn(){
this.x=100; //this->f
this.getX=function(){
console.log(this);//this->f 因为getX方法执行的时候,"."前面是f,所以this是f
}
}
var f=new Fn;
f.getX(); 5、使用call/apply来改变this的指向(一但遇到call/apply上述的四条都没用了) [严格模式]
"use strict";//->告诉浏览器我们接下来编写的JS代码采用严格模式 1、自执行函数中的this永远是undefined
[案例1]
var obj={
fn:(function(i){
//this->undefined
return function(){
//this->obj
}
})(0)
};
obj.fn(); 3、方法执行,看方法名前面是否有".",有的话,"."前面是谁this就是谁,没有的话this就是undefined
[案例1]
var obj={fn:fn};
function fn(){} fn();//this->undefined
obj.fn();//this->obj 我们发现严格模式下的this相对于非严格模式下的this主要区别在于:对于JS代码中没有写执行主体的情况下,非严格模式下默认都是window执行的,所以this指向的是window;但是在严格的模式下,没有写就是没有执行主体,this指向的是undefined;
Js中的this指向问题的更多相关文章
- 理解js中this的指向
学习自原文 http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)! 关于js中this的指向,在函数定义的时候还无法 ...
- js中this的指向
在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1. ...
- JS中的this 指向问题
我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...
- 轻松了解JS中this的指向
JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向 ...
- js中改变this指向的call、apply、bind 方法使用
前言: 由于js 中this的指向受函数运行环境的影响,指向经常改变,使得开发变得困难和模糊,所以在封装sdk,写一些复杂函数的时候经常会用到this 指向绑定,以避免出现不必要的问题,call.ap ...
- js中 this 的指向
js中 this的指向一共存在3种地方: 1.全局的this; 2.构造函数的this; 3.call/apply; 一.全局的this: function test(){ this.d = 3;// ...
- 彻底理解js中this的指向,不必硬背。
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
- 了解学习JS中this的指向
[转] 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问 ...
- JS中this的指向问题
JS中this的定义:this对象是在运行时基于函数的执行环境绑定的(通俗点来说就是:this代表当前函数属于哪个对象). this一般情况下都代表的是global对象,在浏览器中就是window对象 ...
随机推荐
- WebApp MVC,“不一样”的轻量级互联网应用程序开发框架
WebApp MVC 这是一个专门开发互联网程序的开发框架,跟之前的<EFW框架>使用情况不一样,EFW主要用于开发行业软件的快速开发:而WebApp又区别与别的MVC框架,比如AspNe ...
- Log4net介绍
一.Log4net介绍 log4net是一个功能著名的开源日志记录组件.利用log4net可以方便地将日志信息记录到文件.控制台.Windows事件日志和数据库(包括MS Server,Access, ...
- 基于CSS3和HTML5图片加工前后对比代码
分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- 快乐的JS正则表达式(二)
在上一篇中介绍了一个test方法,在本文中将使用另外一个,exec方法可以找到匹配的结果并且返回结果以及位置.exec("正则"): 简单测试: var str = "{ ...
- NPM使用详解(下)
NPM使用详解(下) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !impo ...
- Understanding G1 GC Logs--转载
原文地址:https://blogs.oracle.com/poonam/entry/understanding_g1_gc_logs Understanding G1 GC Logs By Poon ...
- HTML5开发手机项目—个人总结
让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/> 1)html上加 ...
- [git]git add 增加文件,文件名乱码
使用git add添加要提交的文件的时候,如果文件名是中文,会显示形如 274\232\350\256\256\346\200\273\347\273\223.png 的乱码. 解决方案: 在bash ...
- nodeJS 菜鸟入门
从一个简单的 HTTP 服务开始旅程-- 创建一个 server.js 文件,写入: //最简单的 http 服务例子 var http = require("http"); ht ...
- CSS程序思想
CSS的设计思想,比如:CSS预处理器.CSS对像(OOCSS).SMACSS.Atomic设计和OrganicCSS等 一.CSS预处理器最重要的功能: 1.连接: ...