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指向的问题的更多相关文章

  1. 图解javascript中this指向

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些 ...

  2. 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况

    JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函 ...

  3. 关于javascript中this 指向的4种调用模式

    this指向问题绝对可以排js 的top 5最难和最重点的问题,初学者常常搞不清楚this指向哪里,特别是学过java和c#的人,想当年俺也迷糊了好久,直到遇到蝴蝶书,主要是因为js和主流的面向对象语 ...

  4. JavaScript中this指向的简单理解

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  5. javascript中this指向问题

    本文参考http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html this是JavaScript的一个关 ...

  6. javascript中this指向

    在简单函数中,this是指向当前对象,可用来获取当前对象某个属性,但随着函数变复杂,this很多情况不指向当前对象,而是指向window. 1.在独立调用函数中,具有全局执行环境,this指向wind ...

  7. javascript中constructor指向问题

    首先用一个例子指出来constructor存在形式. function Fruit(){ } var f=new Fruit(); console.log(f.constructor);//打印出Fr ...

  8. Javascript中的this指向。

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

  9. 图解avaScript中this指向(超透彻)

    一个图讲清楚JavaScript中this指向: 说明: (1)严格模式下,禁止this关键字指向全局对象会报错. (2)闭包中的this对象具有全局性,因此通常指向window.  (3)优先级:n ...

随机推荐

  1. ui-choose|列表选择jQuery美化插件

    ui-choose是一款基于jQuery的列表选择美化插件.ui-choose可用于选项不太多的select.radio.checkbox等,提升用户体验. 使用方法 使用ui-choose列表美化插 ...

  2. Yii框架的学习指南(策码秀才篇)1-1 如何认识Yii framework

    Yii的框架和其他框架的区别在于:它是更加 快速,安全,专业的PHP框架 Yii是一个高性能的,适用于开发WEB2.0应用的PHP框架. Yii是一个基于组件.用于开发大型 Web 应用的 高性能 P ...

  3. UFT三种录制方式

    1.正常录制(Normal Recording) QTP默认的录制模式,这种录制模式是QTP最突出的特点,是直接对对象的操作,可以说此类模式继承了对象模型的所有优点,能够充分发挥对象库的威力.它通过识 ...

  4. python多线程交替打印abc以及线程池进程池的相关概念

    import threading import sys import time def showa(): while True: lockc.acquire() #获取对方的锁,释放自己的锁 prin ...

  5. Dubbo+zookeeper 基础讲解

    一.dubbo是什么? 1)本质:一个Jar包,一个分布式框架,,一个远程服务调用的分布式框架. 既然是新手教学,肯定很多同学不明白什么是分布式和远程服务调用,为什么要分布式,为什么要远程调用.我简单 ...

  6. TOMCAT7不兼容spring boot 2.0

    找不到这个类,找不到那个类... Spring Boot 2.0 (and Spring Framework 5 upon which it builds) requires a Servlet 3. ...

  7. 吴裕雄--天生自然 神经网络人工智能项目:基于深度学习TENSORFLOW框架的图像分类与目标跟踪报告(续四)

    2. 神经网络的搭建以及迁移学习的测试 7.项目总结 通过本次水果图片卷积池化全连接试验分类项目的实践,我对卷积.池化.全连接等相关的理论的理解更加全面和清晰了.试验主要采用python高级编程语言的 ...

  8. [VUE]关于路由哪些事儿

    什么是路由 之前有个小伙伴面试被问到:面试官:不用vue能不能写单页面应用?答:用angular啊(咳咳,开个玩笑),答案确实是可以的,原生js中有个事件叫做onhashchange,可以在windo ...

  9. ubuntu 16 下安装 Ubuntu Make

    第一步:下载安装包 地址:http://ftp.gnu.org/gnu/make/ 第二步:解压 先进入存放文件目录,图示: 进行解压,图示: 解压并copy到安装目录 第三步:编译 1.查看目录, ...

  10. 北京VS上海:“活着为了工作”还是“工作为了生活”?

    Costco开业你去现场了吗?人口普查似的排队场面对于上海人来说已经不稀奇,毕竟当新鲜的商品或是业态来到中国时,上海常常是第一站.但当Costco的新闻不断发酵的同时,在互联网的角落里也有一群人提出了 ...