前端面试系列(二):this
时间:2020-08-01
本文章向大家介绍前端面试系列(二):this,主要包括前端面试系列(二):this使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
看到一些不错的this面试题,总结下来:
当一个函数被调用时,会创建一个活动记录(有时候称为执行上下文),这个记录包含函数在哪里被调用(调用栈)、函数的调用方式以及传入的参数等信息,this就是这个记录的一个属性,会在函数执行的过程中用到。
this既不指向函数自身也不指向函数作用域,它是在函数被调用时绑定的,指向什么完全取决于函数在哪里被调用。
1,
var obj = { a: 10, b: this.a + 10, fn: function () { return this.a; } } console.log(obj.b); console.log(obj.fn());
这题答案是
// NaN // 20
有意思的是这个第一个解为什么是NaN,原因是看this的执行时机,b属性里的this实际上在obj定义的时候就执行了,所以此时this指向了window,而fn里的this是fn执行的时候才会去查找this,因此根据最开始红色的字体,可以知道结论。
2,
function fn( ) { 'use strict'; var a = 1; var obj = { a: 10, c: this.a + 20 } return obj.c; } console.log(fn());
这题答案是
//输出报错==》 a undefined
原因同上一题,看this的绑定时机,但是因为是严格模式下,所以this.a报错了
3,
// 声明一个构造函数 function Person(name, age) { this.name = name; this.age = age; console.log(this); } Person.prototype.getName = function () { console.log(this); }; var p1 = new Person("test", 18); p1.getName();
这道题的答案是
// 打印出来都是构造函数Person
4,
var obj = { foo: "test", fn: function(){ var mine = this; console.log(this.foo); //test console.log(mine.foo); //test (function(){ console.log(this.foo); //undefined console.log(mine.foo); //test })(); } }; obj.fn();
这题的答案在题目里了
前两个就不解释了,后两个:
第一个this.foo,因为立即执行函数,执行者就是window,所以this指向window
第二个,mine是之前保留了上一个this的指针,因此它依然保留着上一个this所指向的当前执行环境obj,因此mine.foo依然是test
5,
function test(arg) { this.x = arg; return this; } var x = test(5); //此时 x = window, y = undefined var y = test(6); //此时 x = 6, y = window , 后面申请的x会覆盖掉第一次在this.x 生成的window.x console.log(x.x); //undefined, 实际上是6.x 是undefined console.log(y.x); //6 实际上是window.x 也就是6
这道题的解析和答案都在里面了
主要是x.x,因为定义y的时候,x被修改了,所以x此时就是6了,因此x.x就没有值了
end
原文地址:https://www.cnblogs.com/yanchenyu/p/13416950.html
- Android Data Binding(数据绑定)用户指南
- Android 禁止Viewpager左右滑动功能
- 高通Audio中ASOC的machine驱动
- 《Redis设计与实现》读书笔记(三十五) ——Redis 二进制位数组及SWAR汉明重量算法
- Android TabWidget底部显示
- 《Redis设计与实现》读书笔记(三十六) ——Redis 慢查询日志实现
- 概率学中的随机变量与分布
- 神马?SQL竟然可以解脑筋急转弯的题目?
- android中一些特殊字符(如:←↑→↓等箭头符号)的Unicode码值
- 基于SpringBoot的任务管理平台v1.0正式发布
- 大数据系统的Lambda架构
- AKKA中的事件流
- Java初涉感悟
- Android 6.0 Permission权限与安全机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法