博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
大兄dei,早点看清this吧
阅读量:5995 次
发布时间:2019-06-20

本文共 1896 字,大约阅读时间需要 6 分钟。

说道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 = 1bar() // 1const obj = {  a: 2,  bar: bar}obj.bar() // 2const b = new bar(); // this.a->undefinedconsole.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中非常重要的东西,掌握了才能写好代码,不然就乱了套了。

本人就是一个前端菜鸟,如果有什么问题,欢迎指出交流,谢谢~

转载地址:http://reqlx.baihongyu.com/

你可能感兴趣的文章
Electron Cash钱包存BCH教程
查看>>
iOS Tagged Pointer (源码阅读必备知识)
查看>>
Object assign()
查看>>
Java生成二维码
查看>>
JDBC 批量插入数据优化, 使用 addBatch 和 executeBatch
查看>>
PowerDesigner更改数据库类型
查看>>
2015年这6部科幻电影,你看了吗?
查看>>
导出excel(sqlserver)
查看>>
Gallery Server Pro ----用于分享相片,视频,音频及其他媒体的ASP.NET相册[Carol]
查看>>
Uvaoj 11248 Frequency Hopping(Dinic求最小割)
查看>>
网站统计代码
查看>>
安装centos 7的时候出现An Unknown Error Has Occurred
查看>>
Linux常用命令大全
查看>>
ceph存储 磁盘IOPS常识
查看>>
ORA-12720: operation requires database is in EXCLUSIVE mode
查看>>
ELK日志服务使用-kafka传输日志(bbotte.com)
查看>>
linux系统之iptables其二命令注解
查看>>
Silverlight C# 游戏开发:高深莫测却浅显易懂的游戏开发
查看>>
标准ACL+扩展ACL+命名ACL
查看>>
Linux常用的基本命令14
查看>>