博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
理解JavaScript里this关键字
阅读量:5013 次
发布时间:2019-06-12

本文共 2056 字,大约阅读时间需要 6 分钟。

1、全局代码中的this:始终指向window

2、函数代码中的this:

var foo = {x: 10};var bar = {    x: 20,    test: function () {        alert(this === bar);        alert(this.x);    }};bar.test(); //bar对象调用test(): true, 20foo.test = bar.test;foo.test(); //foo对象调用test(): false, 10

  在通常的函数调用中,this是由激活上下文代码的调用者来提供的,即调用函数的父上下文(parent context )。this取决于调用函数的方式

  即使是正常的全局函数也会被调用方式的不同形式激活,这些不同的调用方式导致了不同的this值

function foo() {    alert(this);}foo(); // windowalert(foo === foo.prototype.constructor); // true// 但是同一个function的不同的调用表达式,this是不同的foo.prototype.constructor(); // foo.prototype
var foo = {    bar: function () {        alert(this);        alert(this === foo);    }};foo.bar(); //foo、truevar exampleFunc = foo.bar;alert(exampleFunc === foo.bar); //纯函数比较,是true// 再一次,同一个function的不同的调用表达式,this是不同的exampleFunc();//window、false

引用类型

  引用类型的值与函数上下文中的this值如何相关?——从最重要的意义上来说。 这个关联的过程是这篇文章的核心。 一个函数上下文中确定this值的通用规则如下:

  在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用括号()的左边是引用类型的值,this将设为引用类型值的base对象(base object),在其他情况下(与引用类型不同的任何其它属性),这个值为null。不过,实际不存在this的值为null的情况,因为当this的值为null的时候,其值会被隐式转换为全局对象。

var foo = {    bar: function () {        alert(this);    }};foo.bar(); //foo(foo.bar)(); //foo(foo.bar = foo.bar)(); //window(false || foo.bar)(); //window(foo.bar, foo.bar)(); //window

  第二个例子:在组运算的返回中,我们得到仍是一个引用类型 foo.bar 。这就是this值为什么再次设为base对象,即foo。与下面这例子区别:

(function () {    alert(this); })();//()左边不是引用类型,所以是window,实际上在字面上完全等价于(foo.bar)(),但this指向就是不同,这就是核心区别。
 

  第三、四、五例经过组运算后,得到的都不是引用类型,所以是window。

3、作为构造器调用的函数中的this:

function A() {    alert(this); // 新创建的对象new A    this.x = 10;}var a = new A();

  在这个例子中,new运算符调用“A”函数的内部的[[Construct]] 方法,接着,在对象创建后,调用内部的[[Call]] 方法。 所有相同的函数“A”都将this的值设置为新创建的对象。

4、手动设置函数的this值

  在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值。它们是.apply和.call方法。他们用接受的第一个参数作为this值,this 在调用的作用域中使用。这两个方法的区别很小,对于.apply,第二个参数必须是数组(或者是类似数组的对象,如arguments,反过来,.call能接受任何参数。两个方法必须的参数是第一个——this。

var b = 10;function a(c) {    alert(this.b);    alert(c);}a(20); //10、20a.call({b: 20}, 30); //20、30a.apply({b: 30}, [40]);//30、40

 

转载于:https://www.cnblogs.com/goloving/p/7143304.html

你可能感兴趣的文章
Java单例模式
查看>>
重温WCF之消息契约(MessageContract)(六)
查看>>
Excel2007制作直方图和正态分布曲线图
查看>>
android adb常用指令
查看>>
Android框架之路——GreenDao3.2.2的使用
查看>>
类方法WCF学习笔记-KnowTypeAttribute用法
查看>>
平台程序微信平台开发应用的签名
查看>>
程序卡OK6410裸板更新程序_update
查看>>
MYSQL用户名:root
查看>>
JavaScript 开发规范要求
查看>>
Devstack 安装OpenStack Pike版本(单机环境)
查看>>
Javascript 函数初探
查看>>
类的定义、声明使用
查看>>
转载,gini系数代码对应的公式
查看>>
编译安装mysql-5.6.40
查看>>
年终总结
查看>>
初创互联网公司技术架构变迁之路
查看>>
【BZOJ 3676】 3676: [Apio2014]回文串 (SAM+Manacher+倍增)
查看>>
【网络流24题】No. 13 星际转移问题 (网络判定 最大流)
查看>>
解析$.grep()源码及透过$.grep()看(两次取反)!!的作用
查看>>