说道this,可以说是前端中很重要的问题之一了,也是面试或者笔试常考的问题。所以还是早点看清this吧,大兄dei。

this是什么?为什么要存在?

this关键字是js中最最复杂的机制之一。他被自动定义到所有函数的作用域中。

通过把属性或者方法挂载在this上就可以实现属性或者方法的在函数中的公用。

eg:

function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.getName = function() {
return this.name;
}

如何正确判断普通函数中的this?又如何正确判断箭头函数中的this?

普通函数

eg:

function bar() {
console.log(this.a)
}
var a = 1
bar() // 1 const obj = {
a: 2,
bar: bar
}
obj.bar() // 2 const b = new bar(); // this.a->undefined
console.log(b);
  • 直接调用 bar 来说,不管 bar 函数被放在了什么地方,this 一定是window
  • obj.bar() 来说,我们只需要记住,谁调用了函数,谁就是this,所以在这个场景下 bar 函数中的 this 就是 obj 对象
  • new 的方式来说,new完之后得到一个实例对象, this 被永远绑定在了实例对象b上面,不会被任何方式改变this

箭头函数

箭头函数中的this,指的是包裹箭头函数的第一个普通函数的this

eg:

function b() {
return () => {
return () => {
console.log(this)
}
}
}
console.log(b()()()) // this->window

关于this的一点问题

构造函数中用this和prototype定义属性或函数方法的区别

function obj() {
this.a = [];
this.fn = function() { }
}
var o1 = new obj();
o1.fn = {};
console.log(typeof o1.fn);
var o2 = new obj();
console.log(typeof o2.fn);

而构造函数中用和prototype定义属性或函数方法是这样的

function obj1() {
this.a = []
}
obj1.prototype.share = []
var o3 = new obj1();
o3.share.push(1);
var o4 = new obj1();
o4.share.push(2);
console.log(o4.share);

this定义的方式,实例化之后是让每一个实例化对象都有一份属于自己的在构造函数中的对象或者函数方法,而prototype定义的方式,实例化之后每个实例化对象共同拥有一份构造函数中的对象或者函数方法。

想想除了以上情况,在哪里可以巧妙的使用一下this呢?

emmm...

call、apply的实现

Function.prototype.mycall = function(context, ...arg) {
// 1. 通过this获取函数,
var context = context || window;
context.fn = this;
// 执行函数
context.fn(...arg);
// 2. 删除函数
delete context.fn;
}
var foo = {
value: 'foo'
}
var bar = function(name, age) {
console.log(name);
console.log(age);
console.log(this.value);
console.log(this);
}
// bar.mycall(foo, 'zenquan', 23);
bar.mycall(null, 'zenquan', 23)

jQuery的链式操作

通过一个return this实现。

总而言之,this是JavaScript中非常重要的东西,掌握了才能写好代码,不然就乱了套了。

大兄dei,早点看清this吧的更多相关文章

  1. 【转帖】自助式BI的崛起:三张图看清商业智能和大数据分析市场趋势

    自助式BI的崛起:三张图看清商业智能和大数据分析市场趋势 大数据时代,商业智能和数据分析软件市场正在经历一场巨变,那些强调易用性的,人人都能使用的分析软件正在取代传统复杂的商业智能和分析软件成为市场的 ...

  2. 让我们彻底看清MVC、MVP

    这里開始记录下来自己对MVC.MVP.MVVM这三种框架模式的理解,本文从以下几个方面来梳理. 架构的目的 框架模式.设计模式 MVC设计的介绍 MVC在Android中的应用 MVC该怎样设计 MV ...

  3. 使用iCamera 测试MT9F002 1400w高分辨率摄像头小结 之!!看清细节!!!

    使用iCamera 测试MT9F002 1400w高分辨率摄像头小结 之!!看清细节!!! 本方案测试两种种分辨率输出(其他更多分辨率设置,可以参考手册配置) 4608*3288=1515万像素 11 ...

  4. 一文带你看清HTTP所有概念(转)

    一文带你看清HTTP所有概念   上一篇文章我们大致讲解了一下 HTTP 的基本特征和使用,大家反响很不错,那么本篇文章我们就来深究一下 HTTP 的特性.我们接着上篇文章没有说完的 HTTP 标头继 ...

  5. mysql存储引擎InnoDB详解,从底层看清InnoDB数据结构

    InnoDB一个支持事务安全的存储引擎,同时也是mysql的默认存储引擎.本文主要从数据结构的角度,详细介绍InnoDB行记录格式和数据页的实现原理,从底层看清InnoDB存储引擎. 本文主要内容是根 ...

  6. 折扣&折让-看清实质的思考

    折扣&折让 看清实质的思考 Author:zfive5(zidong) Email:zfive5@163.com 引子 有些东西,在没有人指点的情况,一时理解不了,就放一放,等到某一个契机到来 ...

  7. 大神都在看的RxSwift 的完全入坑手册

    大神都在看的RxSwift 的完全入坑手册 2015-09-24 18:25 CallMeWhy callmewhy 字号:T | T 我主要是通过项目里的 Rx.playground 进行学习和了解 ...

  8. 8张图让你一步步看清 async/await 和 promise 的执行顺序

    摘要: 面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3749 Fundebug经授权转载,版权归原作者所有. 为什么写这篇文章? 说实 ...

  9. 8 张图帮你一步步看清 async/await 和 promise 的执行顺序(转)

    https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651555491&idx=1&sn=73779f84c289d9 ...

随机推荐

  1. ng表单验证

    <angular>中form表单的验: 1.在form中加上 novalidate 2.利用ng-pattern验证 (*如果不匹配的话 ng-model是绑定不上数据的) 常用的表单验证 ...

  2. Petrozavodsk Winter-2018. Jagiellonian U Contest

    A. XOR 求出所有数的异或和$sum$,将所有数and上$sum$,然后求线性基,则选取$sum$的所有$1$对应的基最优. 时间复杂度$O(n\log x)$. #include<cstd ...

  3. java单链表反转(花了半个多小时的作品)

    欢迎光临............... 首先我们要搞清楚链表是啥玩意儿?先看看定义: 讲链表之前我们先说说Java内存的分配情况:我们new对象的时候,会在java堆中为对象分配内存,当我们调用方法的 ...

  4. 《SpringMVC从入门到放肆》六、SpringMVC开发Controller的方法总结

    到目前为止我们已经大概学习了StringMVC的执行流程,以及详细的处理器映射器和处理器适配器的执行流程,并可以自己写一个配置方式开发的小Demo了.今天我们来总结一下实现一个Controller的几 ...

  5. ECMA Script 6_对象的扩展

    对象 1. ES6 允许直接写入变量和函数,作为对象的属性和方法 const foo = 'bar'; /*****************属性的优化********************/ con ...

  6. [LeetCode] Max Increase to Keep City Skyline 保持城市天际线的最大增高

    In a 2 dimensional array grid, each value grid[i][j] represents the height of a building located the ...

  7. jsp模板继承

    jsp通过自定义标签实现类似模板继承的效果 关于标签的定义.注册.使用在上面文章均以一个自定义时间的标签体现,如有不清楚自定义标签流程的话请参考这篇文章 http://www.cnblogs.com/ ...

  8. 21 ArcMap 10.6.1 添加Excel格式数据

    注:此次的操作软件为ArcMap10.6.1,在ArcMap其它版本中也可使用,如遇到问题,欢迎交流. 1:Excel中数据(点)标准化(一般是经纬度),将原来的度分秒表示的都要转换成度表示的,如图所 ...

  9. poj 3422 最小费用流

    如果不是从费用流区做这个题几乎不会想到用费用流 点有权值很容易想到拆点 问题是求最大sum ...  把权值取负 这样最小费用流的相反数就是最大sum 源点S汇点T k为移动次数 矩阵中的点拆成入点出 ...

  10. Java常用类库 读书笔记 二

    1.Date类 常用操作方法: public Date ()                         构造方法,实例化Date类对象 public Data(long Date)       ...