文档章节

javascript知识整理之this

那小么
 那小么
发布于 2017/03/10 16:20
字数 1132
阅读 26
收藏 0

js中的this是一个头疼的问题,尤其对于笔者这种初级的菜鸟来讲,下面梳理下this的知识,可以当做是初级进阶也好入门也罢,总归输出的才是自己掌握的:

Js中this不是由词法作用域决定的 而是调用时动态指定,这就有点麻烦了,如果不能明确知道函数调用时的词法作用域this的指向也就只能靠猜了,算一卦这种模式不是不推荐而是根本不能用,要是真的不能确定this指向 可以查一下调用栈 或是上个断点之类的,当然alert这种较为原始的方法也是有效的不过确实有点low;

Js函数调用方式大致可以归为四类(此处是阮一峰大神总结的)即a.直接调用(默认指向)b.当方法调用(隐式指向)c.用new调用d.是特殊的调用方式(bind,call..)(显示指向);

当然了这里是有优先级的就像css的class一样 即: c > d > b > a;下面也说以便这四种当用方式(非严格模式):

A.直接调用

function fn(){

console.log(this)

}

fn();

这里的this是window 这个是比较简单基础,像是这样:

var n = 7;

function fn(){

   this.n = 8;

   function fn1(){

      console.log(this.n)

   }

   return fn1();

}

var test = new fn();

这里this也是指向window的所以this.n==window.n 也就是7.这里也可以看出this不是基于词法作用域的 而是调用时指定的,怎么回事呢,有句话大概意思就是只要是函数声明其this都指向window ,与声明的位置无关;

B.当方法调用:

var name = "a";

var obj = {

      name: "b",

      sayname: function(){

      console.log(this.name);

   }

}

obj.sayname();

这个也是一个典型的基础的案例,输出 b ;this指向obj;这段代码其实就是这样的:

var name = "a";

var obj = new Object();

obj.name = "b";

obj.sayname = function(){

   console.log(this.name);

}

obj.sayname();

这里有个小坑,像是这样:

var name = "a";

var obj = {

   name: "b",

   obj2: {

      name: "c",

      sayname: function(){

         console.log(this.name);

      }

   }

}

obj.obj2.sayname();

Var test = obj.obj2.sayname;

Test();

第一个congsole是 c ;原因也是一直提的this不是取决于词法作用域的而是动态绑定的 obj.obj2.sayname 这里sayname是作为obj.obj2对象的函数调用的 所以this指向obj.obj2;

第二个console也好理解,当sayname赋值给变量test时当前执行上下文就变了。指向window了。所以第二个是c; 简单讲当方法调用时 this指向调用方法的那个对象;换言之谁调用了这个方法this指向谁;

C.由new调用:

先上代码:

var name = "b";

function fn(){

   this.name = "a";

   this.sayname = function(){

      console.log(this.name)
   }
}
var obj = new fn();

obj.sayname();

在看这段代码前应该了解下 new的时候到底发生了些什么事..new的函数是一个构造函数,而提到构造函数就得说说工场模式...越倒越多。。这些东西在原型,继承那块在总结,这里先做个概念性的了解.以上边代码为例 当执行new fn()时 在fn函数第一行隐式的创建了一个对象即 var o = new Object();下面的this全部替换成了o,也就是o.name = “a”;... 最后把这个对象o return了。而又把这个返回值赋给了变量obj,obj的引用地址也是指向这个对象(复合类型);所以结果是a;

D.特殊的调用方式(有时候也叫硬性绑定或显示绑定):

Call与applay用法一样唯一区别在意一个传递的参数是集合(applay)另一个是用几个参数写几个参数(call):

var name = "a";

var obj = {

   name: "b",

   obj2: {

      name: "c",

      sayname: function(){

         console.log(this.name);

      }

   }

}

obj.obj2.sayname.call(obj);

没错用了B 的例子,这下输出b ,我们给他硬性的绑定到了obj上,用apply与bind也是一样的这里在整理原型继承的时候会详细梳理;还有像是eval setInterval等这种奇葩其作用域是全局的 要是在这里边用this不做处理的话都会指向window...

虽然this有点诡异却不是飘忽不定,哦对了 作为一个前端怎么不接触dom呢 dom事件也会改变this指向的比如:

document.onclick = function(){

   console.log(this)

}

这里会打印document这个节点,简而言之事件在哪this就指向那;es6的箭头函数是个很好玩的语法;不过不在这次梳理范围内.

最后欢迎大神指正!

© 著作权归作者所有

那小么
粉丝 3
博文 10
码字总数 9804
作品 0
朝阳
前端工程师
私信 提问
JavaScript 学习资源推荐

最近 reddit 有讨论:References for JavaScript Mastery. 去年 Rey Bango 博客上也有一篇文章:What to Read to Get Up to Speed in JavaScript. 下面是我的整理,希望能对你有所帮助。 登堂...

deeper099
2011/09/29
501
1
javascript操作cookie函数写法

整理了两种简单的javascript操作cookie写法,均有三个功能:设置cookie、查询cookie、删除cookie。第一种简单易懂,第二种封装使用方便。原生js设置cookie。 简单版: function setCookie(n...

西西爱OS
2012/10/03
193
0
动画:面试官问我 0.1 + 0.2 __ 0.3 ? 为什么?该如何正确回答?

写在前边 第一次去面试,面试官问我0.1 + 0,2 0.3?估计很多人都知道在 JS 中0.1 + 0.2 != 0.3 的,至于大于还是小于还真没弄明白。 像这种变态的问题,在 JS 中存在很多,那小鹿就干脆整理成...

一只不甘平凡的小鹿
10/10
0
0
绝对冷知识,浏览器环境下JavaScript能够利用到的提交/请求数据的方式有这么多!你都深入了解了几个?

你知道在浏览器环境下JavaScript能够利用到的提交/请求数据的方式有哪些吗?这些方式各自有什么特点呢?在什么情况下使用呢?让我们一起来整理一下。 基础知识 建议大家先看完这几篇文章,了...

Myou_Aki
09/29
0
0
JavaScript的宏任务与微任务

在介绍前端宏任务与微任务之前,先列出来一道题,一块看一下。 诸位可以先给出来一个自己的答案,运行一下结果,看看是否与自己想的一致。 1.基本概念 这里介绍一下JavaScript里面的一些基本...

公子穷奇
04/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员web前端教程分享web前端入门基础知识

  好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一两个还不行,必须对这三门语言都要熟悉。下面我们一起来看一看吧! ...

好程序员官网
8分钟前
2
0
elasticsearch 中文分词插件IK-Analyze

elasticsearch 版本 7.3 安装中文分词插件 插件对应的版本需要和elasticsearch的版本一致 插件各个版本下载地址 https://github.com/medcl/elasticsearch-analysis-ik/releases 使用elastic...

kdy1994
12分钟前
3
0
只用一套解决方案,就可解决80%的交通物流行业信息难题

行业背景 新中国成立70多年来,中国交通运输总体上已经形成了多节点、全覆盖的综合运输网络,“五纵五横”综合运输大通道基本贯通,一大批综合客运、货运枢纽站场(物流园区)投入运营,取得...

朕想上头条
14分钟前
4
0
spring-boot结合AOP实现数据源动态配置

Spring-Boot+AOP方式实现多数据源切换 设计总体思路:Spring-Boot+AOP方式实现多数据源切换,继承AbstractRoutingDataSource实现数据源动态的获取,在service层使用注解指定数据源。 一、多数...

蜗牛伊
15分钟前
2
0
干货 | 京东技术中台的Flutter实践之路

在 2019 年,Flutter 推出了多个正式版本,支持的终端越来越多,使用的项目也越来越多。Flutter 正在经历从小范围尝鲜到大面积应用的过程,越来越多的研发团队加入到 Flutter 的学习热潮中,...

京东云技术新知
19分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部