ES5中函数的4种调用

在ES5中函数内容的this指向和调用方法有关

1 函数调用模式

包括函数名()和匿名函数调用,this指向window

 function getSum() {
console.log(this) //window
}
getSum() (function() {
console.log(this) //window
})() var getSum=function() {
console.log(this) //window
}
getSum()

2 方法调用

对象.方法名(),this指向对象

var objList = {
name: 'methods',
getSum: function() {
console.log(this) //objList对象
}
}
objList.getSum()

3 构造器调用

new 构造函数名(),this指向构造函数

function Person() {
console.log(this); //指向构造函数Person
}
var personOne = new Person();

4 间接调用

利用call和apply来实现,this就是call和apply对应的第一个参数,如果不传值或者第一个值为null,undefined时this指向window

function foo() {
console.log(this);
}
foo.apply('我是apply改变的this值');//我是apply改变的this值
foo.call('我是call改变的this值');//我是call改变的this值

ES6中函数的调用

箭头函数不可以当作构造函数使用,也就是不能用new命令实例化一个对象,否则会抛出一个错误
箭头函数的this是和定义时有关和调用无关
调用就是函数调用模式

(() => {
console.log(this)//window
})() let arrowFun = () => {
console.log(this)//window
}
arrowFun() let arrowObj = {
arrFun: function() {
(() => {
console.log(this)//arrowObj
})()
}
}
arrowObj.arrFun();

es5、es6函数调用的更多相关文章

  1. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  2. 简述ES5 ES6

    很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. ...

  3. React/React Native的 ES5 ES6 写法对照

      ES5 ES6 模块 var React = require("react-native); var { Image, Text, View } = React;   import Re ...

  4. Atitit js es5 es6新特性 attilax总结

    Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...

  5. 【转】React Native中ES5 ES6写法对照

    很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...

  6. 【ES5 ES6】使用学习

    [ES5 ES6]使用学习 转载: ============================================================= 1.Promise 2.下划线转驼峰,驼 ...

  7. JavaScript Learning Paths(ES5/ES6/ES-Next)

    JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...

  8. ES5 & ES6 基础

    一.什么是ES5 附上一览表 (5.1中文 (2011.6)): http://lzw.me/pages/ecmascript/ (5.1英文PDF):http://www.ecma-internat ...

  9. React Native 的ES5 ES6写法对照表

    模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react" ...

随机推荐

  1. ustc 1117

    无根树同构 有两种方法,一种是确定其中一棵树,另一棵树枚举根节点. 一种是,利用拓扑排序,先确定其中一棵树.另一棵树,若拓扑后剩两个节点,则枚举这两个节点为根结点,否则,只需做一次.注意,无根树节点入 ...

  2. [RxJS 6] The Retry RxJs Error Handling Strategy

    When we want to handle error observable in RxJS v6+, we can use 'retryWhen' and 'delayWhen': const c ...

  3. Android Notification状态栏通知

    没有添加额外的震动及声音效果,这里直接实现了通知的功能,看效果吧: MainActivity.java package com.example.notification; import android ...

  4. selenium清空默认文字

    默认输入框 鼠标点击上去还有文案 直接用 clear不可以

  5. 替换文件里的相关单词(一)之文件类型为txt

    首先说一下详细的实现思路: 第一步:我们须要获取要改动文件的信息,我们能够通过文件的路径来获取文件的FileInputStream,即文件的输入流,然后调用InputStreamReader读取文件输 ...

  6. css3 动态背景

    动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.当中的80% 20%为 ...

  7. bzoj4241 历史研究——分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4241 就是分块,预处理出从第 i 块到 j 位置的答案,以及从第 i 块到最后位置间每个数出 ...

  8. acc文件的运行

    1.method 1: use "acc" >acc hello.acc world.mc <--- compilation will generate the hel ...

  9. hdu1429胜利大逃亡(bfs)

    胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  10. SpringCloud学习 什么是微服务(一)

    关于SpringCloud,我是看了周老师的<SpringCloud与Docker微服务架构实战>之后才有了一点了解,做下记录,以供后期学习.本人知识有限,如有不对,欢迎批评 1.什么是单 ...