前端面试之JavaScript中this的指向【待完善!】
JavaScript中this的指向问题!
另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为。
在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 this 值(在网页的全局上下文中调用函数时, this 指向 windows)。来看下面的例子:
window.color = 'red';
let person = {
name: 'lvhang',
age: 23,
color: 'pink'
}
function sayColor() {
console.log(this.color);
}
function sayColor2() {
console.log(this.color === window.color);
}
sayColor(); // red
sayColor2(); // true
person.sayColor = sayColor;
person.sayColor(); // pink
定义在全局上下文中的函数 sayColor()引用了 this 对象。这个 this 到底引用哪个对象必须到函数被调用时才能确定。因此这个值在代码执行的过程中可能会变。
如果在全局上下文中调用sayColor(),这结果会输出"red",因为 this 指向 window,而 this.color 相当于 window.color。
而在把 sayColor()赋值给 person 之后再调用 person.sayColor(), this 会指向 person,即 this.color 相当于
person.color,所以会显示"blue"。
在构造函数中this 指向的是我们的对象实例
function Singer(name, gender) {
this.name = name;
this.age = age;
}
var xiaoshi = new Singer('小时姑娘!');
// 1 在构造函数中, 里面的this指向的是对象实例 xiaoshi
2 原型对象里面的this指向的是谁呢?!
// 只有你调用的时候才能确定指向的是谁!
var that;
Singer.prototype.sing = function() {
console.log('我唱歌很好听, 你听听看!');
that = this;
}
var xiaoshi = new Singer('小时姑娘!');
// 一般情况下this指向的是我们的调用者!
// 也就是我们的对象实例!xiaoshi
前端面试之JavaScript中this的指向【待完善!】的更多相关文章
- 前端面试之JavaScript中数组的方法!【残缺版!!】
前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...
- 前端面试之JavaScript中的闭包!
前端面试之JavaScript中的闭包! 闭包 闭包( closure )指有权访问另一个函数作用域中变量的函数. ----- JavaScript 高级程序设计 闭包其实可以理解为是一个函数 简单理 ...
- javascript中this的指向
作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...
- 前端面试之ES6中的继承!
前端面试之ES6中的继承! ES6之前并没有给我们提供 extends继承.我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承. 1 call() 两个作用: 1 调用这个函数! 2 修改函数 ...
- 前端开发:Javascript中的数组,常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
- Javascript中的this指向。
一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...
- JavaScript中 this 的指向
很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...
- 前端面试之JavaScript的基本数据类型!
前端面试之JavaScript的基本数据类型! JS的基本数据类型 数字 字符串 布尔值 JavaScript中有两个特殊的原始值: null (空) 和undefined (未定义), , 它们不是 ...
- 面试题-浅谈JavaScript中的This指向问题
各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言 ...
随机推荐
- python之列表操作的几个函数
Python中的列表是可变的,这是它却别于元组和字符串最重要的特点,元组和字符串的元素不可修改.列举一些常用的列表操作的函数和方法. 1,list.append(x),将x追加到列表list末尾: 1 ...
- 【Tomcat】Tomcat原理与系统架构
目录 版本: 一,目录说明 二,浏览器访问服务器的流程 三,Tomcat系统总体架构 3.1 Tomcat请求的大致流程 3.2 Servlet容器处理请求流程 3.3 Tomcat系统总体架构 四, ...
- 解决UE4缓存使C盘膨胀的问题
使用UE4的时候会发现C盘越来越小了,那是因为UE4引擎的缓存文件默认保存在C盘的缘故. 概述 一.出现的问题:UE4的缓存文件会导致C盘膨胀. 二.解决的方式:请严格按照下列步骤来执行.1. 更改U ...
- sql 中 foreach 中传入多个不同的参数问题
<!--查找某用户绑定的药物不良反应报告列表--> <select id="selectSurveyListByUserProId" resultType=&qu ...
- Spring-Boot配置文件web性能(服务器)配置项(常用配置项为红色)
参数 介绍 server.address 服务器应绑定到的网络地址 server.compression.enabled = false 如果启用响应压缩 server.compression.exc ...
- 大白话Java多线程,小白都能看的懂的哦
什么是线程 说到线程我们应该先了解下什么是进程,下面这个图片大家应该都比较熟悉吧. 我们看到的这些单独运行的程序就是一个独立的进程,进程之间是相互独立存在的.我们上面图中的360浏览器.百度云盘等等都 ...
- JavaDailyReports10_06
今日收获: 一.所有引用类型变量的初始化一定要使用new 关键字定义声明,空指针异常的错误原因可能是变量没有初始化导致的. 每一个类体的数据成员一定要在实例化的同时赋值,用一个实例化的类实现问题中最小 ...
- 基于Let's Encrypt生成免费证书-支持多域名泛域名证书
目录 客户端 certbot acme.sh 安装acme.sh 1. 自动安装 2. 手动安装 3. 测试收否安装成功 使用acme.sh生成证书 1. HTTP 方式 2. DNS 方式 1. 生 ...
- 聊一聊这个总下载量36039K的XSS-NPM库,是如何工作的?
上篇文章这一次,彻底理解XSS攻击讲解了XSS攻击的类型和预防方式,本篇文章我们来看这个36039K的XSS-NPM库(你没有看错就是3603W次, 36039K次,36,039,651次,数据来自h ...
- 服务器报错"您的主机中的软件中止了一个已建立的连接"
网上很多的说法都模棱两可,只是说和远程连接有关,这个说的太泛泛了. 我现在遇到的问题是java web出现的, 执行表单提交的时候出现该错误,原因是ajax和表单同时提交导致的, 相信很多朋友用了aj ...