最近看了一本书,让自己的野路子走走正规路线

方法调用模式:

  方法:当一个函数被保存为对象的一个属性时,我们称它为一个方法。

var obj = {
fun1: function() {this} // 这时的 this 指向 obj
}
obj.fun1()

函数调用模式:

  

var obj = {
fun1: function() {this},
fun2: function() {
var fun3 = function(){
this...  // 这时的 this 指向 window
}
fun3();
}
}
obj.fun2()

这个时候认为的习惯是指向 obj 。 为了解决这个问题  var _this = this 将obj 的this保存起来就可以了。

var obj = {
fun1: function() {this},
fun2: function() {
var _this = this;  // 这里是方法调用模式 this 指向obj
var fun3 = function(){
_this  // 不解释了
}
fun3();
}
}
obj.fun2()

ES6 箭头函数中的this

function taskA() {
this.name = 'hello' var fn = function() {
console.log(this) // 输出 window 因为是 函数调用模式,所以指向window
console.log(this.name)
} var arrow_fn = () => {
console.log(this) // 输出 window 因为箭头函数自己没有this,于是向上找到taskA()中的this,而taskA()是函数调用模式,所以它的this 指向window
console.log(this.name)
}
fn()
arrow_fn()
}
taskA()

我们也可以通过 bind  call  apply 三个函数来强行指定this, 至于这三种方法就不赘述了

Javascript百学不厌 - this的更多相关文章

  1. Javascript百学不厌-递归

    虽然偶尔也用过,但是从来没具体来整理过 普通递归: function fac(n) { ) ; ); } fac() 这是个阶乘.但是占用内存,因为: fac(5) (5*fac(4)) (5*(4* ...

  2. Javascript百学不厌 - 模块模式

    记录自己觉得重要又可能忘记的东西 用模块模式产生安全的对象: var serial_maker = function () { var preifx = ''; var seq = 0; return ...

  3. Javascript百学不厌 - 尾递归

    虽然偶尔也用过,但是从来没具体来整理过 普通递归: function fac(n) { ) ; ); } fac() 这是个阶乘.但是占用内存,因为: fac(5) (5*fac(4)) (5*(4* ...

  4. JavaScript巧学巧用

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...

  5. JavaScript怎样学

    嘿,我最近接到一个 Web 项目,不过老实说,我这两年没怎么接触 Web 编程,听说 Web 技术已经发生了一些变化.听说你是这里对新技术最了解的 Web 开发工程师? 准确地说,我是一名「前端工程师 ...

  6. JavaScript 巧学巧用

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...

  7. JavaScript 导学推荐

    基本开始js学习的时候,可能会觉得很混乱,一开始都是从一些简单的表单验证还有拷贝别人效果代码,然后再慢慢去深入了解.我是觉得js是需要一定语言编程基础,我是觉得随着深入,JS的里面实在不算太好理解,个 ...

  8. JavaScript我学之八善变的this---函数执行上下文

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 函数执行上下文 当函数运行时,通过this,函数可以获取它运行所需的外界环境的相关信息(比如某变量的值,另一个对象的引用等). this引用 ...

  9. JavaScript我学之七数组

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 数组是“多态数组" ,啥都可以放 //JavaScript中的多态数组 var arr = ["one", 2 ...

随机推荐

  1. 利用nginx添加账号密码验证

    server { listen ; server_name xxx.com; location / { proxy_pass http://10.10.10.10:5601; proxy_redire ...

  2. React.js 学习笔记

    React.js React.js 是时下最流行的前端 JavaScript 框架之一. 创建工程 # 安装 CLI $ npm install -g create-react-app # 创建新的应 ...

  3. linux 权限之acl

    查看分区ACL权限是否开启 centos 6 dumpe2fs -h /dev/sda1(是查看ext2/ext3/ext4 文件系统信息的命令) centos 7   xfs_growfs /dev ...

  4. 面试加分项---HashMap底层实现原理

    想必大家都知道HashSet和HashMap之间的关系,HashSet是依赖于HashMap的,HashSet集合就是HashMap的key所组成的集合,我们都知道HashMap的value是可以重复 ...

  5. ceph结构详解

    引言 那么问题来了,把一份数据存到一群Server中分几步? Ceph的答案是:两步. 计算PG 计算OSD 计算PG 首先,要明确Ceph的一个规定:在Ceph中,一切皆对象. 不论是视频,文本,照 ...

  6. 分布式版本控制系统Git的安装和使用

    作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址:https://github.com/ ...

  7. SSM商城项目(六)

    1.学习计划 1.Redis服务器搭建 2.Redis持久化 3.Redis集群搭建 4.Jedis 5.Solr服务器安装 2.Redis的安装 2.1. Redis的安装 Redis是c语言开发的 ...

  8. LENGTH()和CHAR_LENGTH()区别

    LENGTH()返回以字节为单位的字符串的长度.CHAR_LENGTH()返回以字符为单位的字符串的长度.   分别对应于java中的str.getBytes().length和str.length( ...

  9. FortiGate防火墙HA下联堆叠交换机

    1.拓扑图 2.防火墙配置 3.交换机配置 interface GigabitEthernet1/0/47 switchport access vlan 30 switchport mode acce ...

  10. jq怎么给图片绑定上传文件按钮

    html代码 <img src="/img/zhengmian.png" alt="" class="file1"> <i ...