1、JS中this指针指向

JS中函数的 this 并不遵守词法作用域规则(即作用域由声明时所处的位置决定),而是取决于函数的调用方式

影响 this 指针的因素有以下:

  1. 方法是否由某个对象调用,比如:obj.test()
  2. 是否是独立函数调用,比如:test()
  3. 是否使用函数的call、apply、bind 等方法进行 this 的绑定,比如:test.apply(obj2)
  4. 是否是箭头函数
  5. 是否使用了 new 关键字调用函数

2、作为独立函数调用

在JS里面一般来说函数的调用 this 指向就是谁调用这个函数或方法,this 指针就指向谁。

function person(){
this.name="xl";
console.log(this);
console.log(this.name);
}
person(); //输出 window xl

在这段代码中person函数作为独立函数调用,实际上person是作为全局对象window的一个方法来进行调用的,即window.person();

所以这个地方是window对象调用了person方法,那么person函数当中的this即指window,同时window还拥有了另外一个属性name,值为xl.

var name="xl";
function person(){
console.log(this.name);
}
person(); //输出 xl

同样这个地方person作为window的方法来调用,在代码的一开始定义了一个全局变量name,值为xl,它相当于window的一个属性,即window.name="xl",又因为在调用person的时候this是指向window的,因此这里会输出xl.

3、由某个对象进行调用

在上面的代码中,普通函数的调用即是作为window对象的方法进行调用。显然this关键字指向了window对象.

再来看下其他的形式

var name="XL";
var person={
name:"xl",
showName:function(){
console.log(this.name);
}
}
person.showName(); //输出 xl
//这里是person对象调用showName方法,很显然this关键字是指向person对象的,所以会输出name var showNameA=person.showName;
showNameA(); //输出 XL
//这里将person.showName方法赋给showNameA变量,此时showNameA变量相当于window对象的一个属性,因此showNameA()执行的时候相当于window.showNameA(),即window对象调用showNameA这个方法,所以this关键字指向window

再换种形式:

var personA={
name:"xl",
showName:function(){
console.log(this.name);
}
}
var personB={
name:"XL",
sayName:personA.showName
}
personB.sayName(); //输出 XL
//虽然showName方法是在personA这个对象中定义,但是调用的时候却是在personB这个对象中调用,因此this对象指向

4、作为构造函数来调用

new 关键字调用函数会在函数内部创建一个新对象,然后将内部的 this 指针指向该对象,最后返回该对象。

function Person(name){
this.name=name;
}
var personA = Person("xl");
console.log(personA.name); // 输出 undefined
console.log(window.name);//输出 xl
//上面代码没有进行new操作,相当于window对象调用Person("xl")方法,那么this指向window对象,并进行赋值操作window.name="xl". function Person(){
console.log(this)
}
new Person();  //输出一个对象

new 操作符的作用过程解析:

1. 创建一个类的实例:创建一个空对象obj,然后把这个空对象的__proto__设置为Person.prototype(即构造函数的prototype);

2. 初始化实例:构造函数Person被传入参数并调用,关键字this被设定指向该实例obj;

3. 返回实例obj。

function New(F){
var obj = {'__proto__': F.prototype}; /*第一步*/
return function() {
F.apply(obj, arguments); /*第二步*/
return obj; /*第三步*/
}
}

5、call、apply、bind方法的调用

5.1、call、apply方法

call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,也就是为了改变函数体内部 this 的指向。

apply、call 两个方法的作用完全一样,只是接受参数的方式不太一样。

var func = function(arg1, arg2) {

};
func.call(anotherObj, arg1, arg2);
func.apply(anotherObj, [arg1, arg2])

其中是 anotherObj 是你想指定的上下文,他可以是任何一个 JavaScript 对象,call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

var name = "WL";
var Person = {
name: "xl",
showName: function () {
console.log(this.name);
}
}
Person.showName.call(); //输出 "WL"
//这里call方法里面的第一个参数为空,默认指向window。
//虽然showName方法定义在Person对象里面,但是使用call方法后,将showName方法里面的this指向了window。因此最后会输出"WL"; funtion FruitA(n1, n2) {
this.n1 = n1;
this.n2 = n2;
this.show = function (x, y) {
this.n1 = x;
this.n2 = y;
}
}
var fruitA = new FruitA("cheery", "banana");
var FruitB = {
n1: "apple",
n2: "orange"
};
fruitA.show.call(FruitB, "pear", "peach"); //FruitB调用fruitA的change方法,将fruitA中的this绑定到对象FruitB上。
console.log(FruitB.n1); //输出 pear
console.log(FruitB.n2); // 输出 peach

5.2、bind()方法

var anotherFunc = func.bind( anotherObj, a1, a2 );  //anotherObj为新函数的 this,后面的参数在调用新函数时加上调用时传入的参数作为函数的运行参数

bind() 方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,这个函数不论怎么调用都有同样的this值。传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

var num = 9;
var mymodule = {
num: 10,
getNum: function() {
console.log(this.num);
}
};
mymodule.getNum(); //
var getNum = mymodule.getNum;
getNum(); // 9, 因为在这个例子中,"this"指向全局对象
var boundGetNum = getNum.bind(mymodule); //用bind()方法改变上下文
boundGetNum(); //

下面是一些例子:

var name = "WL";
function Person(name) {
this.name = name;
this.sayName = function () {
setTimeout(function () {
console.log("my name is " + this.name);
}, 50)
}
}
var person = new Person("xl");
person.sayName() //输出 “my name is WL”。这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象调用,因此this的指向为window, 则 this.name 则为 WL //使用bind()方法改变sayName方法
this.sayName = function () {
setTimeout(function () {
console.log("my name is " + this.name);
}.bind(this), 50) //注意这个地方使用的bind()方法,绑定setTimeout里面的匿名函数的this一直指向Person对象
}
person.sayName(); //输出 “my name is xl”;

这里setTimeout(function(){console.log(this.name)}.bind(this),50);,匿名函数使用bind(this)方法后创建了新的函数,这个新的函数不管在什么地方执行,this都指向的Person,而非window,因此最后的输出为"my name is xl"而不是"my name is WL"

在setTimeout中使用 bind 时有人可能会疑惑这时候绑定的 this 不也是 window 的吗,其实不是,因为这是定义时的 this,使用时的 this 才是谁调用this指向的就是谁。

注意:setTimeout/setInterval/匿名函数执行的时候,this默认指向 window 对象,除非手动改变 this 的指向。在《javascript高级程序设计》当中,写到:“超时调用的代码 (setTimeout) 都是在全局作用域中执行的,因此函数中的this的值,在非严格模式下是指向window对象,在严格模式下是指向undefined”。本文都是在非严格模式下的情况。

另一种输出 "xl" 的方法:

//输出"WL"
var name = "WL";
function Person() {
this.name = "xl";
this.showName = function () {
console.log(this.name);
}
setTimeout(this.showName, 50);
}
var person = new Person(); //输出 "WL"
//在setTimeout(this.showName,50)语句中,会延时执行this.showName方法,this.showName里面的this此时指向的是window对象,因此会输出"WL"; //修改Person()函数
function Person() {
this.name = "xl";
var that = this;
this.showName = function () {
console.log(that.name);
}
setTimeout(this.showName, 50)
}
var person = new Person(); //输出 "xl"
//这里在Person函数当中将this赋值给that,即让that保存Person对象,因此在setTimeout(this.showName,50)执行过程当中,console.log(that.name)即会输出Person对象的属性"xl"

6、箭头函数中的 this 指针

箭头函数中没有自己的 this ,只能继承外层的 this 指针,这个称为 this 穿透。

箭头函数内部的 this 指的是定义时所处的作用域的外层作用域 。

var obj = {
test() {
console.log(this);
var obj2 = {
test2: () => {
console.log(this);
},
test3() {
console.log(this);
}
}
obj2.test2();
obj2.test3();
}
}
obj.test();
//在 test 方法中输出的是 obj 对象
//在 test2 方法中输出的也是 obj 对象
//在 test3 方法中输出的是 obj2 对象

7、this 指针优先级

浏览器中的全局 this 无需跟其他元素比较,优先级最高。独立函数调用和作为对象方法调用优先级最低。

其他的:  new /  箭头函数   >   bind  >  apply  / call

new 和箭头函数不可同时使用

本文部分引用自http://www.cnblogs.com/lisha-better/p/5684844.html

JS中的this指针的更多相关文章

  1. js中的this指针(二)

    在 js 中声明并定义一个函数后,除了定义时传入的形式参数,函数还会接收到 2 个附加的参数:this 和 arguments. this 指针的值取决于调用时的模式. 当这个函数被保存为对象的一个属 ...

  2. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

  3. js中的this指针的用法

    首先看下面代码: function funcA() { this.name = "hello"; console.log(this.name); this.show = funct ...

  4. js中的this指针(五)

    js中的函数有一个很有意思的地方,即函数自身也方法. apply方法让我们可以建立一个参数数组并用其来调用函数. apply方法接受两个参数,第一个是将被绑定给 this 的值.第二个就是一个参数数组 ...

  5. js中的this指针(三)

    当一个函数并非一个对象的忏悔时,它会被当作一个函数来调用. 此时,函数中的 this 指针被绑定到了全局对象. 后果:方法不能利用内部函数来帮助工作,由于 this 被绑定了错误的值,将无法共享该方法 ...

  6. js中的this指针(四)

    当一个函数前面加上 new 操作符来调用,此时 this 会被绑定到新生成的对象上. 这既是所谓的构造函数调用模式.

  7. 由javascript中的this指针所想到的

    初次结识 this 指针,是在学 <<C++ Primer Plus>>这本书的时候(这本书勉强读了一二遍,之后转学 html+css+js了,不过这是后话). 依稀记得书中举 ...

  8. JS OOP -02 深入认识JS中的函数

    深入认识JS中的函数: 1.概述,认识函数对象 2.函数对象和其他内部对象的关系 3.将函数作为参数传递 4.传递给函数的隐含参数:arguments 5.函数的apply,call方法和length ...

  9. JS中的作用域及闭包

    1.JS中的作用域 在 es6 出现之前JS中只有全局作用域和函数作用域,没有块级作用域,即 JS 在函数体内有自己的作用域,但是如果不是在函数体的话就全部都是全局作用域.比如在 if.for 等有 ...

随机推荐

  1. Git bash使用中...

    理解Head指向分支及标签tag Head指向当前分支(如master),可以把每次提交完成的修改看成一个圈,在修改上可以开另一分支为接下来的修改做准备,未修改前新建的分支与当前分支可看成绕修改圈转: ...

  2. 用CSS text-transform转换字母大小写

    以前我们都是用JS来实现字母的首字母大小写的,但现在没有必要了,CSS完全可以实现,话说兼容性还好从IE6开始就支持了. text-transform:none | capitalize | uppe ...

  3. C#中事件的使用

    C#中事件的使用  http://www.cnblogs.com/wayfarer/archive/2004/04/20/6712.html 用一个例子来说明事件的使用. 创建一个简单的类,名为Fil ...

  4. Netty学习之客户端创建

    一.客户端开发时序图 图片来源:Netty权威指南(第2版) 二.Netty客户端开发步骤 使用Netty进行客户端开发主要有以下几个步骤: 1.用户线程创建Bootstrap Bootstrap b ...

  5. CSS3画腾讯QQ图标 无图片和js参考

    css代码: body { font: 12px Tahoma,arial,sans-serif; margin:; padding:; } #mask { left:; opacity: 0.2; ...

  6. Docker技术快速精通指南

    doctor专业网站:http://www.dockerinfo.net/ Docker中文文档 csdn 的docker专栏: Docker技术快速精通指南

  7. mac下VirtualBox跟linux虚拟机共享文件夹

    1.在VirtualBox中设置好共享目录,设置自动挂载/固定分配 2.安装增强工具,为了避免安装出错需要安装依赖文件 #更新内核. yum update kernel#需要安装相应的kernel-d ...

  8. php项目------浏览器导航开发

    最近项目不是很急,把以前做的php项目分享一些给大家,希望对各位有所帮助:很简单的一个项目,本人用来练习ThinPHP框架的. 浏览器导航开发,php+mysql+apache,ThinkPHP3.2 ...

  9. WebGL树形结构的模型渲染流程

    今天和大家分享的是webgl渲染树形结构的流程.用过threejs,babylonjs的同学都知道,一个大模型都是由n个子模型拼装而成的,那么如何依次渲染子模型,以及渲染每个子模型在原生webgl中的 ...

  10. Cmake Make makefile GNU autotools

    个人总结 首先makefile是由make来编译,而makefile的生成可以由GUN autotools和CMake来实现,但前者没有CMake的CMakelist.txt直观,所以我们一般用CMa ...