javascript中关于this的理解
首先看一下这几个定义
this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被视为某个对象的方法调用时,this等于那个对象。
不过,匿名函数的执行环境具有全局性,因此其this对象通常指向window.每个函数在被调用的过程中都会自动取得两个特殊变量:this和arguemtns。内部函数在搜索这两个变量的时候,只会搜索到其活动对象为止,因此永远不可能访问外部函数中的这两个变量。
this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。
首先,先排除几个错误的认知:
1、this对象是指向自身的。
function foo(num){
console.log(num);
this.count++;
}
foo.count=0;
for(var i=0;i<5;i++){
foo(i)
};
console.log(foo.count); //0
通过这个实例可以看出,count虽然被设置为了foo的属性。但是这里的this并不是指向foo自身的,因此当输出foo.count值的时候,其依然是0.
2、this是指向自身的词法作用域的,也可以简单理解成对于变量对象的引用吧。
function foo(){
var a=2;
console.log(this.a);
}
foo(); //undefined;
我们在foo函数的作用域内定义了a的值为2,然而当我们输出a的值的时候却可以的到undefined,因此这样的理解也是不对的。
实际上,this是在函数被调用时发生的绑定,它指向什么完全取决于在哪里调用。
所以说,我们的第一步就是判断函数的调用位置。
function baz(){
//当前调用栈是:baz
//因此,当前的调用位置是全局作用域
console.log('baz');
bar();//bar的调用位置
}
function bar(){
//当前调用栈是baz->bar
//因此调用位置是在baz中
console.log('bar');
foo();//<-foo的调用位置
}
function foo(){
//目前调用栈是baz->bar->foo
//因此,当前调用位置是在bar中
console.log('foo')
}
baz();//<--baz的调用位置
分析出了他们的调用位置之后,接下来就是要判断它是应用于哪种绑定规则的。
1、默认绑定 独立函数调用-指向全局
var a=2;
function foo(){
console.log(this.a);
}
foo(); //2
这个例子中,函数的调用位置是全局环境,所以其指向全局即等于window(注意这是在非严格模式下)
var a=2;
function foo(){
'use strict';
console.log(this.a);
}
foo(); //undefined
这时,由于严格模式的原因将会输出undefined;
var a=100;
function foo(){
var a='foo中的a';
bar();
}
function bar(){
console.log(this.a);
}
foo();//100
由调用位置决定的另外一个示例。
2、隐式绑定 调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。
function foo(){
console.log(this.a);
}
var obj={
a:2,
foo:foo
}
obj.foo(); //2
当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象中。当然,也有一些隐式绑定的函数丢失绑定对象的问题,例如:
var a='全局中的a';
function foo(){
console.log(this.a);
}
var obj={
a:2,
foo:foo
}
var s=obj.foo;
s(); //全局中的a;
s只是obj.foo的一个引用,而在当s调用的时候已经没有了上下文对象,因此将会默认绑定,从而输出‘全局中的a’
还有一种情况:
var a='全局中的a';
function s(fn){
fn();<--调用位置
}
function foo(){
console.log(this.a);
}
var obj={
a:2,
foo:foo
}
s(obj.foo);
fn只是引用了obj.foo,而在obj.foo的调用位置没有任何特殊绑定,所以是默认绑定指向全局。
3、显式绑定 用call/apply方法。
function foo(){
console.log(this.a);
}
var obj={
a:'董志强',
foo:foo
}
foo.call(obj);
//通过foo.call(..),我们可以在调用foo时强制把他的this绑定到obj上。
4、new绑定
1创建一个新对象
2这个对象会被执行[proto]连接
3这个新对象会绑定到函数调用的this.
4如果函数没有返回其他对象,那么new表达式中的函数会自动返回这个新对象。
function foo(a){
this.a=a;
}
var b=new foo(2);
console.log(bar.a);//2
大概就是这样子的吧,判断出具体的位置之后,再判断绑定方式,这样就可以判断出this的指向了。也有一些例外情况,例如foo.call(null)或者foo.apply(undefined)的情况,在没有其他绑定的情况下,这时foo函数里面的this是指向全局的。
这时你会发现是不是好多问题都理解更深刻了,像下面,.
function Person(name,age){
this.name='dong';
this.age=29
}
Person.prototype.z=2;
var person=new Person();
alert(person.z);//2
alert(person.name);//'dong'
都知道,person.z是person对象沿着原型链向上查找得到的,因为Person.prototype属性里面有z这个属性。
而对于name和age来说他们,则是new绑定,this会指向当前new的对象,所以相当于自身创建了name和age这两个属性,而不是向上查找得到的。
javascript中关于this的理解的更多相关文章
- javascript中concat方法深入理解
最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼.因为以前对前端方面的疏忽,导致了一些理解的错误.因此痛改前非,下定决心,不管做什么事情,都要有专研的精神. 在介绍前,抛出一个问题:如何将 ...
- JavaScript - javascript 中的 "||" 与 "&&" 的理解与灵活运
你肯定见到过这样的代码:a = a||"xxx". 它其实就等价于下面三种形式的代码: a = a || "xxx"; 与: if (!a) { a = &qu ...
- javascript中关于继承的理解
首先,你要理解在javascript中,每当一个新函数创建时,都会生成一个prototype属性,我们管它叫做原型对象.看一个例子: function foo(){ this.name='qiangq ...
- 第一篇 对Javascript中原型的深入理解
理解原型对象 在Javascript中不管什么时候,仅仅要创建一个新的函数,就会依据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包括能够有特定 ...
- Javascript中闭包的个人理解
Javascript的一个特殊点就在于它的闭包和回调特性,这两个特性让初学Javascript的我是云里雾里,至今仍在苦苦摸索与理解.在一番苦思之后,整理了一下资料,将自己的理解思路记录下来,以 ...
- 关于JavaScript中prototype机制的理解
最近几天一直在研究JavaScript中原型的机制,从开始的似懂非懂,到今天终于有所领悟.不敢说彻底理解,但是起码算知道怎么回事了. 为什么一开始似懂非懂 开始了解一遍原型机制后,感觉知其然但不知其所 ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
- JavaScript中with语句的理解
with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[0]){ ...
- 深入浅析JavaScript中with语句的理解
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变 ...
- 对于JavaScript中this关键字的理解
这是我第二遍学this了,第一遍学的懵懵的.this指哪里都是凭我一个男人的直觉然后控制台输出看看对不对. 刚查了书.博客.视频.理解差不多了.毕竟菜鸡me: 一.首先介绍下什么是this this是 ...
随机推荐
- jsp-4 用cookie实现记住密码
jsp-4 用cookie实现记住密码 这次就有点简单了 基本是jsp-3的代码但是有些修改 public void login(HttpServletRequest req, HttpServlet ...
- Unity在安卓的一些路径
APK安装之后找不到路径 公司的测试机(安卓)基本都是不带SD卡的. APK在安卓手机上安装之后,使用手机助手类的软件打开文件管理,打开 内置SDK卡/Android/data/ 在这个目录下却发现 ...
- Nginx stream(TCP/UDP)负载均衡
Nginx-1.11.6编译安装 nginx编译安装,(平台:ubuntu 14.04); sudo apt-get install zlib1g-dev sudo apt-get install l ...
- ViewCompat.animate(view) floatEval.evaluate() argbEval.evaluate()
ViewCompat.animate(ivHead) .translationX(60)// .setInterpolator(new CycleInterpolator(4))//循环执行// .s ...
- 数娱科技:借助VR技术可让你了解自己的大脑
你可能很好奇自己的大脑,如果你是一个脑部病患,可能更想了解下自己的大脑.好消息是,脑机接口让这个想法成为可能. 在上周六,AR/VR科技公司广州数娱科技发布了联合5家单位共同研发的"VR人脑 ...
- 想要见识外太空?一款VR头显就能帮你实现梦想
除了宇航员,我们中的大多数人一生都没有机会前往地球之外的宇宙空间,只能在图片和纪录片中感受浩瀚宇宙的震撼. 美国肯尼迪航天中心和BrandVR合作推出的VR头显 而NASA在VR中的投资,创造的新的V ...
- 解决Keras在IDE集成环境中找不到nvcc
在我们正确配置了Keras使用GPU,并在Terminal中运行一切顺利的的时候,转到Pycharm或者Eclipse中运行有可能会出现"nvcc not found on the $PAT ...
- 面试题-Java Web-网络通信
1.HTTP响应的结构是怎么样的? HTTP响应由三个部分组成:状态码(Status Code):描述了响应的状态.可以用来检查是否成功的完成了请求.请求失败的情况下,状态码可用来找出失败的原因.如果 ...
- 运用PhantomJS测试JavaScript
我认为我不需要说服你,测试你的JavaScript代码是一个好主意.但是,测试需要DOM操作的JavaScript代码有时候确是繁琐的.这意味着你需要在浏览器中测试代码而不能使用终端,对吗?错了,事实 ...
- idea新建项目文件名为红色的解决办法
Perference->version Control ->Directory添加项目路径,vcs选<none> 即可.