javascript中有关this的解析题
1.作用域链
作用域:浏览器给js一个生存环境(栈)内存
作用域链:js中的关键字var function 都可以提前声明和定义,提前声明和定义,放在我们的内存地址(堆)内存中,然后js从上到下逐行执行,遇到变量就去内存地址查找是否存在这个变量有就直接使用,没有就继续向父级查找,直到window下结束,这种查找机制叫作用域链
this的目的:js代码中存在大量的变量和函数,我们在只用他们的时候他们到底归属谁
this ( this是js的关键字,指定一个对象,然后去代替他)
1.this分为函数内的this,函数外的this
函数内的this,指向行为发生的主体(方法)
函数外的this,都指向window (没有意思)
2.函数的this和函数在什么环境下定义的没有关系,而和自己的主体有关
3.主体怎么找? 就看这个函数带没带"." 如果函数和方法执行带".",那么this指向"."前面的对象,如果不带点,this就指向window
4.自执行函数里面的this都指向window
小技巧:this个变量的面试题,先找到this的主体是谁,然后把它们换成那个主体就行了
5.给元素中的某一个事件的绑定方法,
当事件触发时,就执行绑定的方法,方法中的this指向当前元素;
总结:怎样找到this的指函数内
函数内的this跟函数在哪定义没有关系,只跟在执行时的主体有关,带点的主体就是"."前面的,不带"."就是window
案例分析:
1.
var a={
chifan:function(){
console.log(this);
}
}
a.chifan() ( 这里面的this a就是主体,因为他在"."前面)
function chifan{
console.log(this)
}
chifan() (这个里面没带点,所以指向this指向window)
2.var num=45;
var obj={
num=12,
ff:(function(){
console.log(this.num)
})() 其结果为45; (因为他是自调用,所以它的this指向window)
var um=45;
var obj={
um:12,
ff:function(){
console.log(this.um)
}
}
obj.ff() 其结果为12; ("." 因为有点,所以this指向它点前面就是他的对象)
3. body中输入
<div id="div1"> hello world</div>
function fn(){
console.log(this) (其this指向的对象是div1 后面跟的语句为document.getElementById("div1").onclick=fn; 他的前面有".")
}
document.getElementById("div1").onclick=function(){
console.log(this); (其this指向的对象是div1 因为"."在他的前面)
fn() (其this的指向的对象是window,因为没"." )
}
document.getElementById("div1").onclick=fn;
4.奇虎360的一道经典面试题
1) var val=1;
var obj={
val:2,
del:function(){
console.log(this); this指的是对象obj
this.val*=2
console.log(val) (因为没有this,所以是一道作用域的题,内部没有声明val这个变量,所以去父级找,结果是1)
console.log(this.val) (有this,因为"." 所以他的对象是obj , obj中val的值为2,所以其结果是4)
}
}
var ff=obj.del()
2) var val=1;
var obj={
val:2,
del:function(){
console.log(this); this指定的window;
this.val*=5 window的val被赋值为5*1(1是val全局的值) 最后的结果是val被赋值了5
console.log(val) (全局下的val) 所以结果是5
console.log(this.val) (全局下的val) 所以结果是5
}
}
var fn=obj.del;
fn()
最后说一下var ff=obj.del()与var fn=obj.des;fn()的区别
var ff=obj.del() 说的是声明一个变量 将obj为对象的del()函数赋值给ff;
var fn=obj.del;fn() 说的是声明一个变量将obj为对象的del以匿名函数赋值给fn, 因为没"." 所以fn()是在window下的
javascript中有关this的解析题的更多相关文章
- JavaScript中依赖注入详细解析
计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的 ...
- javascript中 json数据的解析与序列化
首先明确一下概念: json格式数据本质上就是字符串: js对象:JavaScript 中的几乎所有事务都是对象:字符串.数字.数组.日期.函数,等等. json数据的解析: 就是把后端传来的json ...
- javaScript中的this关键字解析
this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示, ...
- JavaScript中的 this全面解析
上一章我们排除了一些对this的错误认识和知道了this是在调用函数时被绑定的,完全取决于函数的调用位置.先介绍两个概念:调用位置和调用栈. 调用栈:就是为了到达当前执行位置所调用的所有函数. 调用位 ...
- JavaScript中使用eval()方法解析json串
最近在js用到了eval()方法,在这里做个笔记 当时是这么用的:data = eval("("+data+")"); data为后台向前台传送的一个json串 ...
- 前端开发:Javascript中的数组,常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
- 深入解析Javascript中this关键字的使用
深入解析Javascript中面向对象编程中的this关键字 在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...
- [JavaScript] JS中对Base64的解析
JS中对Base64的解析 <script type="text/javascript"> /** * UTF16和UTF8转换对照表 * U+00000000 – U ...
- 解析JavaScript中apply和call以及bind
函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间 ...
随机推荐
- DevExpress v17.2新版亮点—WinForms篇(三)
用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.开篇介绍了DevExpress WinForms v17.2 Data Grid Control ...
- Android输入法框架系统(上)
输入法,就是用来输入字符(包括英文,俄文,中文)的工具.输入法你可以看成是一种字符发生器,它将输入数据触摸事件或者按键事件转化为其他更丰富的字符.在PC时代,输入法的原始输入来自实体键盘,鼠标,然后输 ...
- HDU 1254 推箱子(BFS)
Problem Description 推箱子是一个很经典的游戏.今天我们来玩一个简单版本.在一个M*N的房间里有一个箱子和一个搬运工,搬运工的工作就是把箱子推到指定的位置,注意,搬运工只能推箱子而不 ...
- [python] 基于词云的关键词提取:wordcloud的使用、源码分析、中文词云生成和代码重写
1. 词云简介 词云,又称文字云.标签云,是对文本数据中出现频率较高的“关键词”在视觉上的突出呈现,形成关键词的渲染形成类似云一样的彩色图片,从而一眼就可以领略文本数据的主要表达意思.常见于博客.微博 ...
- PyCharm Debug调试程序
步骤一:在代码区要进行调试的代码行左侧单击鼠标左键,添加调试断点符号 步骤二:右键单击源文件或代码区内部,弹出菜单,选择[Debug ***] 或在右上角工具栏区单击[debug]按钮,快捷键[shi ...
- pandas DataFrame 索引(iloc 与 loc 的区别)
Pandas--ix vs loc vs iloc区别 0. DataFrame DataFrame 的构造主要依赖如下三个参数: data:表格数据: index:行索引: columns:列名: ...
- [LeetCode&Python] Problem 476. Number Complement
Given a positive integer, output its complement number. The complement strategy is to flip the bits ...
- Ajax和SpringMVC之间JSON交互
Ajax和SpringMVC之间的json数据传输有两种方式: 1.直接传输Json对象 2.将Json序列化成json字符串 1.直接传输Json对象 前端Ajax $(document).read ...
- Oracle查询今天、昨天、本周、上周、本月、上月数据
查询今天数据: SELECT COUNT(1) FROM T_CALL_RECORDS WHERE TO_CHAR(T_RKSJ,'YYYY-MM-DD')=TO_CHAR(SYSDATE,'YYYY ...
- HDU 1176:免费馅饼(DP,自认为很详细的解释)
免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...