理解JavaScript中的this关键字
JavaScript中this关键字理解
在爬虫的过程中遇到了前端的js代码,对于this关键字理解的不是很清楚,所以写下这篇笔记,不足之处,希望得以改之。
this的指向在函数定义的时候无法确定,只有在函数执行的时候确定this的指向
这句话其实有部分干扰性,具体最后在进行总结this关键字的理解
demo01
function printName(){
var userName = "追梦者";
console.log(this.userName); // undefined
console.log(this); // wimdow
}
printName();
说明:可以看到当调用func
函数的时候,发现出现了undefined
和window
本身,可以这样说:这个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?
补充:
如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window
如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
如果一个函数中有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还是指向函数的实例。
补充说明
在严格版中的默认的this不再是window,而是undefined。
new操作符会改变函数this的指向问题,虽然我们上面讲解过了,但是并没有深入的讨论这个问题,网上也很少说,所以在这里有必要说一下。
function fn(){
this.num = 1;
}
var a = new fn();
console.log(a.num); // 1
为什么this会指向a?
new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。
理解JavaScript中的this关键字的更多相关文章
- 转载 深入理解JavaScript中的this关键字
转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一 ...
- 如何理解JavaScript中的this关键字
前言 王福朋老师的 JavaScript原型和闭包系列 文章看了不下三遍了,最为一个初学者,每次看的时候都会有一种 "大彻大悟" 的感觉,而看完之后却总是一脸懵逼.原型与闭包 可以 ...
- 浅显易懂的理解JavaScript中的this关键字
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 1. 一般用处 对 ...
- 正确理解JavaScript中的this关键字
JavaScript有this关键字,this跟JavaScript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下JavaScript的this关键字. ...
- 用自然语言的角度理解JavaScript中的this关键字
转自:http://blog.leapoahead.com/2015/08/31/understanding-js-this-keyword/ 在编写JavaScript应用的时候,我们经常会使用th ...
- 深入理解JavaScript中的this关键字
1. 一般用处 2. this.x 与 apply().call() 3. 无意义(诡异)的this用处 4. 事件监听函数中的this 5. 总结 在JavaScript中this变量是一个令人难以 ...
- 理解javascript中的with关键字
说起js中的with关键字,很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域,然后最关键的一点是不推荐使用with关键字.听到不推荐with关键字后,我们很多人都会忽略掉with关键字 ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
随机推荐
- 十分钟搞懂Lombok使用与原理
1 简介 Lombok是一款好用顺手的工具,就像Google Guava一样,在此予以强烈推荐,每一个Java工程师都应该使用它.Lombok是一种Java™实用工具,可用来帮助开发人员消除Java的 ...
- springboot中springAOP的使用
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
- C++的精度控制
#include <iostream> #include <iomanip> using namespace std; int main( void ) { const dou ...
- [系列] go-gin-api 规划目录和参数验证(二)
目录 概述 规划目录结构 模型绑定和验证 自定义验证器 制定 API 返回结构 源码地址 go-gin-api 系列文章 概述 首先同步下项目概况: 上篇文章分享了,使用 go modules 初始化 ...
- 监听input实时输入
// 用Jquery实现: $('#input-element').on('input',()=>{ console.log("你按了一下111");}) // 用Jquer ...
- 给 asp.net core 写个中间件来记录接口耗时
给 asp.net core 写个中间件来记录接口耗时 Intro 写接口的难免会遇到别人说接口比较慢,到底慢多少,一个接口服务器处理究竟花了多长时间,如果能有具体的数字来记录每个接口耗时多少,别人再 ...
- ABP虚拟文件系统(VirtualFileSystem)实例------定制菜单栏显示用户姓名
ABP默认的MVC启动模板在登录后, 右上角显示的是用户名: 如果想让它显示用户的姓名该如何做呢?这就需要用到ABP一个非常强大的功能------虚拟文件系统. 前期准备 使用ABP CLI创建一个名 ...
- Leetcode之深度优先搜索(DFS)专题-494. 目标和(Target Sum)
Leetcode之深度优先搜索(DFS)专题-494. 目标和(Target Sum) 深度优先搜索的解题详细介绍,点击 给定一个非负整数数组,a1, a2, ..., an, 和一个目标数,S.现在 ...
- MSIL实用指南-给字段、属性、方法、类、程序集加Attribute
C#编程中可以给字段.方法.类以及程序集加特性即继承于Attribute的类.这里讲解怎么在IL中给它们加上特性. 生成字段的对应的类是FieldBuilder,生成属性的对应的类是PropertyB ...
- [python] - profilers性能分析器
1. 性能分析器: profile, hotshot, cProfile 2. 作用: 测试函数的执行时间 每次脚本执行的总时间