javascript中this指向的问题
javascript中this只有函数执行时候才能确定到底指向谁,实际this最终指向是那个调用它的对象。
1,匿名函数中的this——window
function foo(){
var lastName = 'miya';
console.log(this.lastName); //undefined
console.log(this); //window
}
foo();
2,作为对象的方法的this
//作为对象方法
var obj = {
a:1,
getA: function(){
console.log( this === obj); //true
console.log(this.a) //
}
} obj.getA();
再看这个例子:
var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();
此时的this.a是undefined,原因是:尽管fn被最外层的o对象所调用,但是this指向的只是当前fn的上一级的对象,也就是b对象,b对象没有a属性,所以输出undefined。
再看另外一种比较特殊的this指向情况:
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();
这个比较好理解:this指向的永远是最后调用它的对象,也就是函数执行时候的对象,很明显通过对象j去执行fn函数,j的this指向是window,而全局没有a属性,所以输出是undefined。
3,构造函数的this执行
function Fn(){
this.user = "miya";
}
var a = new Fn();
console.log(a.user); //miya
此时Fn构造函数中this指向是a对象,因为new关键字改变了this指向,a是Fn的实例,为什么new关键字会改变this指向,因为new一个实例时候是先创建了一个空对象,然后将原对象或原对象原型上的方法或属性copy一份到新对象上。所以this指向改变到新对象上面。
再来看个例子:
function fn(){
this.name = 'miya';
return {name:'Jone'};
}
var a = new fn();
console.log(a.name);
觉着是不是应该返回miya,但实际返回的是Jone;
function fn(){
this.name1 = 'miya';
return function(){};
}
var a = new fn();
console.log(a.name1); //undefined
此时,a instanceof fn //false;表示a不是fn的实例了。
ES6中的class类的constructor中也有类似的例子:
class Foo {
constructor() {
return Object.create(null);
}
}
new Foo() instanceof Foo
// false
ES6的class相当于ES5中的构造器函数,constructor方法默认返回实例对象this,但是如果返回全新的对象,那么实例就不是原类的实例了。
如果构造函数返回的是一个对象,那么this指向就是那个返回对象,但如果不是对象,this指向还是构造函数的实例。
function fn(){
this.name1 = 'miya';
return null;
}
var a = new fn();
console.log(a.name1); //miya
a instanceof fn //true
照理说null也是对象,但是此时this指向还是构造函数的实例对象,因为null比较特殊。
所以代码中:beforefn.apply( this, arguments );//this指向就是当前的beforefn,因为是beforefn在执行,所以this当然是beforefn了。
【完】
究竟什么是真理?———不可驳倒的谬误便是。 —尼采
javascript中this指向的问题的更多相关文章
- 图解javascript中this指向
JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些 ...
- 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况
JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函 ...
- 关于javascript中this 指向的4种调用模式
this指向问题绝对可以排js 的top 5最难和最重点的问题,初学者常常搞不清楚this指向哪里,特别是学过java和c#的人,想当年俺也迷糊了好久,直到遇到蝴蝶书,主要是因为js和主流的面向对象语 ...
- JavaScript中this指向的简单理解
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
- javascript中this指向问题
本文参考http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html this是JavaScript的一个关 ...
- javascript中this指向
在简单函数中,this是指向当前对象,可用来获取当前对象某个属性,但随着函数变复杂,this很多情况不指向当前对象,而是指向window. 1.在独立调用函数中,具有全局执行环境,this指向wind ...
- javascript中constructor指向问题
首先用一个例子指出来constructor存在形式. function Fruit(){ } var f=new Fruit(); console.log(f.constructor);//打印出Fr ...
- Javascript中的this指向。
一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...
- 图解avaScript中this指向(超透彻)
一个图讲清楚JavaScript中this指向: 说明: (1)严格模式下,禁止this关键字指向全局对象会报错. (2)闭包中的this对象具有全局性,因此通常指向window. (3)优先级:n ...
随机推荐
- arduino驱动oled
OLED一款小巧的显示屏,感觉可以做出很可爱的东西. 这次实验的这款是128X64的OLED屏幕 , 芯片是SSD1306,请确认自家模块芯片型号,不然对不上号啊 使用IIC的方法,简单实验显示示例程 ...
- Django连接SQL Server,安装相关扩展包及相关配置
1.python下载 https://www.python.org/downloads/windows/ 2.根据当前windows和python的版本,下载pymssql相应的exe安装文件. ht ...
- centos 中文乱码解决办法2
特别注意:vm10自带虚拟机共享工具,自动识别utf-8格式的中文文件内容 下面步骤摘自网络: 两种方案其实差不多,这里提供两个文件的下载地址,免得去网上搜这两个文件了: fonts-chinese- ...
- 3dmax2015卸载/安装失败/如何彻底卸载清除干净3dmax2015注册表和文件的方法
3dmax2015提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2015失败提示3dmax2015安装未完成,某些产品无法安装,也有时候想重新安装3 ...
- 第十六届“二十一世纪的计算”学术研讨会 牛津大学肿瘤成像学教授Michael Brady主题演讲
Computing and Healthcare 牛津大学肿瘤成像学教授Michael Brady主题演讲" title="第十六届"二十一世纪的计算"学术研讨 ...
- jstl引入报错
jstl1.0的引入方式为: <taglib uri="http://java.sun.com/jstl/core" prefix="c" /> j ...
- 吴裕雄--天生自然 R语言开发学习:中级绘图
#------------------------------------------------------------------------------------# # R in Action ...
- 2018年宜賓美酒文化節浮空投影舞美特效 / 2018 Yibing Wine Festival Visual Effect Projection
客户 Client:五粮液集团 硬件 Hardware:PC,巴可投影机30,000流明*2 Barco projector 30,000 lumen*2 软件 Software:Resolume, ...
- Apache虚拟机的配置文件解说
1.为了方便管理虚拟主机,我决定使用一种方法,那就是修改httpd-vhosts.conf文件. 第一步首先要使扩展文件httpd-vhosts.conf生效: 1. 打开 apache/conf/h ...
- 斐波那契数列的第N项
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1242 题目: 斐波那契数列的定义如下: F(0) = 0 ...