JavaScript中this关键字理解

在爬虫的过程中遇到了前端的js代码,对于this关键字理解的不是很清楚,所以写下这篇笔记,不足之处,希望得以改之。

this的指向在函数定义的时候无法确定,只有在函数执行的时候确定this的指向

这句话其实有部分干扰性,具体最后在进行总结this关键字的理解

demo01

function printName(){
var userName = "追梦者";
console.log(this.userName); // undefined
console.log(this); // wimdow
}
printName();

说明:可以看到当调用func函数的时候,发现出现了undefinedwindow本身,可以这样说:这个printName的函数实际是被window对象所点出来的

function printName(){
var userName = "追梦者";
console.log(this.userName); // undefined
console.log(this); // window
}
window.printName();

可以发现调用这个函数的本身就是我们的 window对象,所以这里的this关键字所指的就是window 。所以第一个则未被定义,第二个就是window本身。

userName = "梦想实现者";
function printName(){
var userName = "追梦者";
console.log(this.userName); // 梦想实现者
console.log(this); // window
}
window.printName();

此时,this.userName调用的是window的属性值

demo02

var object = {
userName:"追梦者",
printName:function(){
console.log(this.userName); // 追梦者
}
};
object.printName();

这里的this关键字指向的对象是object, 调用是object进行调用的。

demo03

var object = {
userName:"追梦者",
printName:function(){
console.log(this.userName); // 追梦者
}
};
window.object.printName();

demo03和demo02中的案例是一样的,只是调用者不同,但是this指向的还是object对象。

说明:

window是JavaScript中的全局对象,我们创建的变量实际上是给window添加属性,所以这里可以用window.对象。

var object = {
numA:10,
funcB:{
numA:12,
printNum:function(){
console.log(this.numA); // 12
}
}
}
object.funcB.printNum();

这里使用object对象进行调用的,那么为什么没有输出的值是 10?

补充:

  1. 如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window

  2. 如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

  3. 如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象

所以在来看上面的一个案例,就会发现 此时的this指向就是funcB

var object = {
numA:10,
funcB:{
printNum:function(){
console.log(this.numA); // undefined
}
}
}
object.funcB.printNum();

为什么是undefined的?

在对象funcB中发现没有属性numA,这个this指向指的是对象funcB,所有出现了undefined。

demo04

var object = {
numA:10,
funcB:{
numA:12,
printNum:function(){
console.log(this.numA); // undefined
console.log(this);// window
}
}
}
var o = object.funcB.printNum;
o();

是不是有蒙圈了?

注意: 调用者是一个变量,虽然函数printNum是被对象funcB所引用,但是在将printNum赋值给变量o的时候并没有执行所以最终指向的是window

可以进行分析:

// 控制台进行输出:
window.o; ƒ (){
console.log(this.numA); //
console.log(this);//
}

是不是发现这个 f 就是我们的 printNum 函数。

构造函数的this关键字

function Fn(){
this.userName = "追梦者";
}
var User = new Fn;
console.log(User.userName);

此时的this关键字指向的就是 User。对象User可以点出函数Fn里面的userName是因为new关键字可以改变this的指向,将这个this指向对象User,为什么我说User是对象,因为用了new关键字就是创建一个对象实例。

this遇到return的时候

function Fn(){
this.userName = "追梦者";
return {};
}
var User = new Fn;
console.log(User.userName); // undefined
function Fn(){
this.userName = "追梦者";
return function(){};
}
var User = new Fn;
console.log(User.userName); // undefined
function Fn(){
this.userName = "追梦者";
return 1;
}
var User = new Fn;
console.log(User.userName); // 追梦者

说明:如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

补充说明

  1. 在严格版中的默认的this不再是window,而是undefined。

  2. new操作符会改变函数this的指向问题,虽然我们上面讲解过了,但是并没有深入的讨论这个问题,网上也很少说,所以在这里有必要说一下。

function fn(){
this.num = 1;
}
var a = new fn();
console.log(a.num); // 1

为什么this会指向a?

new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。

理解JavaScript中的this关键字的更多相关文章

  1. 转载 深入理解JavaScript中的this关键字

    转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字   1. 一 ...

  2. 如何理解JavaScript中的this关键字

    前言 王福朋老师的 JavaScript原型和闭包系列 文章看了不下三遍了,最为一个初学者,每次看的时候都会有一种 "大彻大悟" 的感觉,而看完之后却总是一脸懵逼.原型与闭包 可以 ...

  3. 浅显易懂的理解JavaScript中的this关键字

    在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 1. 一般用处 对 ...

  4. 正确理解JavaScript中的this关键字

    JavaScript有this关键字,this跟JavaScript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下JavaScript的this关键字. ...

  5. 用自然语言的角度理解JavaScript中的this关键字

    转自:http://blog.leapoahead.com/2015/08/31/understanding-js-this-keyword/ 在编写JavaScript应用的时候,我们经常会使用th ...

  6. 深入理解JavaScript中的this关键字

    1. 一般用处 2. this.x 与 apply().call() 3. 无意义(诡异)的this用处 4. 事件监听函数中的this 5. 总结 在JavaScript中this变量是一个令人难以 ...

  7. 理解javascript中的with关键字

    说起js中的with关键字,很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域,然后最关键的一点是不推荐使用with关键字.听到不推荐with关键字后,我们很多人都会忽略掉with关键字 ...

  8. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  9. 深入理解javascript中的立即执行函数(function(){…})()

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

随机推荐

  1. ASP.NET Core 中的 ServiceProvider

    前言 在 ASP.NET Core 中,微软提供了一套默认的依赖注入实现,该实现对应的包为:Microsoft.Extensions.DependencyInjection,我们可以通过查看其对应的开 ...

  2. Log4j2源码分析系列:(一)配置加载

    前言 在实际开发项目中,日志永远是一个绕不开的话题.本系列文章试图以slf4j和log4j2日志体系为例,从源码角度分析日志工作原理. 学习日志框架,首先要熟悉各类日志框架,这里推荐两篇文章,就不再赘 ...

  3. 随笔编号-05 BigDecimal 处理集合

    1  创建一个BigDecimal 对象 BigDecimal Sum = new BigDecimal(0); 2  一个BigDecimal 对象,保留2位小数点 Sum.setScale(2,B ...

  4. MySql基础架构以及SQL语句执行流程

    01. mysql基础架构 SQL语句是如何执行的 学习一下mysql的基础架构,从一条sql语句是如何执行的来学习. 一般我们写一条查询语句类似下面这样: select user,password ...

  5. C#窗体--鼠标事件

    常见的鼠标事件: mouseclick,mousedown,mouseup,mousuenter,mouseleave.mousemove mouseDown按下鼠标事件: //鼠标按下后显示 pri ...

  6. API 资源隔离系统设计与实现

    (马蜂窝技术原创内容,公众号 ID:mfwtech) Part 1 背景 大交通业务需要对接机票.火车票.租车.接送机等业务的外部供应链,供应商的数据接口大部分通过 HTTP.HTTPS 等协议进行通 ...

  7. centos安装oracle11g

    1.1 安装依赖,创建用户和目录 参考http://www.cnblogs.com/gaojun/archive/2012/11/22/2783257.html yum -y install binu ...

  8. CF-920C-Swap Adjacent Elements 贪心

    题意 给你一个1-n的排列. 并给你一个字符串——其中用0和1表示对应数列中的位置上的值可不可以和后面相邻的数交换. 判断该数列能否在限制中交换为不降序数列. 思路 由于刚学了树状数组,一开始以为是用 ...

  9. go Server示例

    示例1: package main import ( "fmt" "log" "net/http" "time" ) f ...

  10. ubantu下配置共享文件

    原文转自 http://blog.chinaunix.net/uid-25305993-id-3754109.html 一 samba的安装: sudo apt-get install samba   ...