javascript中this指向

时间:2021-03-12 04:42:57

在简单函数中,this是指向当前对象,可用来获取当前对象某个属性,但随着函数变复杂,this很多情况不指向当前对象,而是指向window。

1、在独立调用函数中,具有全局执行环境,this指向window。

  var name="evan";
function Name(){
this.name="evan2";
4 console.log(this.name) //evan2
}
Name();
console.log(this.name) //evan2

2. 匿名函数中,this都指向window对象

  function ftn(){
( function(){
console.log(this);// window
})();
}
ftn();
  function ftn0(){
var ftn1 = function(){
console.log(this);// window
};
ftn1();
}
ftn0();

3、被嵌套的独立函数,this指向window

  var a = 0;
var obj = {
a : 2,
foo:function(){
function test(){
console.log(this.a);
}
test();
}
}
obj.foo();//

在闭包中,也很容易出现这样,函数时立即调用,this指向window

 var a=0;
var obj={
a:2,
fn:function foo(){
5 return function(){
6 console.log(this.a)
}
} }
obj.fn()(); //0

这经常是不想得到的结果,用that=this就可以解决

  var a=0;
var obj={
a:2,
fn:function foo(){
var that=this;
return function(){
console.log(that.a)
}
}
}
obj.fn()(); //

闭包可以访问所在父函数的变量,所以先在父函数保存this,传递给闭包函数。

注意:函数的传递

   var a = 0;
function foo(){
console.log(this.a);
};
var obj = {
a : 2,
foo:foo
}
9 var bar = obj.foo; //这行表示把foo函数体传给bar
10 bar();//

这相当于

 var a = 0;
var bar = function foo(){
console.log(this.a);
}
bar();//

 内置函数

  var a = 0;
function foo(){
console.log(this.a);
};
var obj = {
a : 2,
foo:foo
}
setTimeout(obj.foo,100);//

这相当于

  var a = 0;
setTimeout(function foo(){
console.log(this.a);
4 },100);//

间接引用

  function foo() {
console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); //
//将o.foo函数赋值给p.foo函数,然后立即执行。相当于仅仅是foo()函数的立即执行
(p.foo = o.foo)(); //
 1  function foo() {
console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); //
//将o.foo函数赋值给p.foo函数,之后p.foo函数再执行,是属于p对象的foo函数的执行
9 p.foo = o.foo;
p.foo();//

call()   把方法绑定到某个对象中

  var a = 0;
function foo(){
console.log(this.a);
}
var obj = {
a:2
7 };
foo();//
foo.call(obj);//2 把foo方法绑定到obj对象。
   function ftn(name){
console.log(name);
console.log(this);
}
ftn("101");
var obj = {
name:"xtq"
};
ftn.call(obj,"102");
输出:101
Window
102
Object {name: "xtq"}
 var name = "I am window";
var obj = {
name:"sharpxiajun",
job:"Software",
ftn01:function(obj){
obj.show();
},
ftn02:function(ftn){
ftn();
},
ftn03:function(ftn){
ftn.call(this);
}
};
function Person(name){
this.name = name;
this.show = function(){
console.log("姓名:" + this.name);
console.log(this);
}
}
var p = new Person("Person");
obj.ftn01(p);
obj.ftn02(function(){
console.log(this.name);
console.log(this);
});
obj.ftn03(function(){
console.log(this.name);
console.log(this);
}); 输出:
姓名:Person
Person {name: "Person"}
I am window
Window
sharpxiajun
Object {name: "sharpxiajun", job: "Software"}

new出一个对象时,this指向新生成的对象。

  function foo(something) {
this.a = something;
}
var obj1 = {foo: foo};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); //
obj1.foo.call(obj2,3);
console.log( obj2.a ); //
//在下列代码中,隐式绑定obj1.foo和new绑定同时出现。最终obj1.a结果是2,而bar.a结果是4,说明this被绑定在bar上
var bar = new obj1.foo( 4 );
console.log( obj1.a ); //
console.log( bar.a ); //

简单说就是:

  • 有对象就指向调用对象  (如对象的方法)
  • 没调用对象就指向全局对象 (如setTimeout、对象的方法中的方法)
  • 用new构造就指向新对象
  • 通过 apply 或 call 或 bind 来改变 this 的所指。

这篇文章是用于笔记记录,如有错误,望指正

参考:http://www.cnblogs.com/xiaohuochai/p/5735901.html

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指向的问题

    javascript中this只有函数执行时候才能确定到底指向谁,实际this最终指向是那个调用它的对象. 1,匿名函数中的this——window function foo(){ var lastN ...

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

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

  6. javascript中this指向问题

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

  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. Mac下JDK安装配置

    首先可以通过官网下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html,至于下什么版本根 ...

  2. mysql case when then end学习

    表 vtiger_acctive,字段 id,name. 1. 查询中使用 # 查询如果name的值为 hello1 时输出 6666,当值为 hello2 时,输出 333333 select ca ...

  3. MySQL5.7更改密码时出现ERROR 1054 (42S22): Unknown column 'password' in 'field list'

    转自:http://blog.csdn.net/u010603691/article/details/50379282 新安装的MySQL5.7,登录时提示密码错误,安装的时候并没有更改密码,后来通过 ...

  4. python(25)下载文件

    利用程序自己编写下载文件挺有意思的.Python中最流行的方法就是通过Http利用urllib或者urllib2模块.当然你也可以利用ftplib从ftp站点下载文件.此外Python还提供了另外一种 ...

  5. C++ Iterator迭代器介绍及Iterator迭代器用法代码举例

    C++ Iterator迭代器介绍 迭代器可被用来访问一个容器类的所包函的全部元素,其行为像一个指针.举一个例子,你可用一个迭代器来实现对vector容器中所含元素的遍历.有这么几种迭代器如下: 迭代 ...

  6. 在使用Ibatis查询数据返回时,报如下错误:java ibatis The error happened while setting a property on the result object

    问题: 在使用Ibatis查询数据返回时,报如下错误: [com.show.add.proxy.SqlMapClientTemplateProxy]com.ibatis.common.jdbc.exc ...

  7. JQuery原理介绍及学习方法

    前言 对于JQuery,想必大家都很熟悉.目前,很多web项目,在实施的过程中,考虑到各浏览器原生JS API的兼容性,大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发.JQue ...

  8. ABP架构学习系列二:ABP中配置的注册和初始化

    一.手工搭建平台 1.创建项目 创建MVC5项目,手动引入Abp.Abp.Web.Abp.Web.Mvc.Abp.Web.Api 使用nuget添加Newtonsoft.Json.Castle.Cor ...

  9. python3.6+selenium3.13 自动化测试项目实战一

    自己亲自写的第一个小项目,学了几天写出来的一个小模块,可能还不是很完美,但是还算可以了,初学者看看还是很有用的,代码注释不是很多,有问题可以加我QQ 281754043 一.项目介绍 目的: 测试某官 ...

  10. IOC,DIP,DI,IoC容器

    定义 IOC(Inversion of Control  控制反转),DIP(Dependency Inverson Principle 依懒倒置)都属于设计程序时指导原则,并没有具体的实现.比较常用 ...