前端面试之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之selenium创建多个标签页
最近在做一个项目,需要用到cookies登录,想法是,在同一个浏览器下,打开两个标签页进行.让其自动获取cookies,先记录,不行的话,到时候再手动加载cookies. 1 ''' 2 #selen ...
- 回顾 2020 年 GitHub 的大事件,你知道多少?
作者:HelloGitHub-小鱼干 这里是 HelloGitHub 出品的年度盘点系列,本期我们将盘点 GitHub 在 2020 发生的大事件,回顾一下今年 GitHub 给我们带来了那些惊喜.故 ...
- 常见编译器EOP
delphi: 55 PUSH EBP 8BEC MOV EBP,ESP 83C4 F0 ADD ESP,-10 B8 A86F4B00 ...
- springcloud执行流程理解图
执行流程图
- [WPF] 让第一个数据验证出错(Validation.HasError)的控件自动获得焦点
1. 需求 在上一篇文章 <在 ViewModel 中让数据验证出错(Validation.HasError)的控件获得焦点>中介绍了如何让 Validation.HasError 的控件 ...
- 输入一个正整数 target ,输出所有和为 target 的连续正整数序列(至少含有两个数)
package leetcode;import edu.princeton.cs.algs4.Cycle;import java.util.ArrayList;import java.util.Arr ...
- Oracle创建表空间创建用户授权
注意:SYS用户下执行.sys登录必须为sysdba身份.查看数据文件存放位置. select * from dba_data_files; 1.创建表空间 CREATE TABLESPACE tp_ ...
- springboot文件上传问题记录
最近做项目需要开发一个通过excel表格导入数据的功能,上传接口写好调试的时候遇到几个问题,记录一下. 报错1: 15:50:57.586 [[1;33mhttp-nio-8763-exec-8 [0 ...
- webservcie学习之webservice是什么
之前写代码,只是用到的时候才去看相关技术,用过后也没有再回头特别 去看,现在突然发现对一些技术的了解不够深刻,故现在准备再从头对用到的技术深入的学习下.就从webservice开始.首先对我不解的地方 ...
- 上传功能-弹窗实现-vue
-引入弹窗页面 import fileUpload from 'src/page/cuApplyManage/fileUpload.vue'; -页面布局 <div> <fileUp ...