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. HDU 4522

    DIJK,最短路,建两个图就好了. #include <cstdlib> #include <cstdio> #include <cstring> #include ...

  2. 有趣的linux shell 命令, 跑马车

    apt-get install sl

  3. 网络基础篇(一)--TCP/IP协议族

    TCP/IP协议族是一个分层,多协议通信体系. 1 TCP/IP协议族体系结构 TCP/IP协议族自底而上分为四层: 数据链路层, 网络层, 传输层和应用层. 1.1 数据链路层 实现网卡接口的网络驱 ...

  4. ZZUOJ-1195-OS Job Scheduling(郑州大学第七届ACM大学生程序设计竞赛E题)

    1195: OS Job Scheduling Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 106  Solved: 35 [id=1195&quo ...

  5. nginx安装【linux下安装】

    nginx下载安装 http://nginx.org/en/download.html 点击右键,复制链接http://nginx.org/download/nginx-1.14.2.tar.gz c ...

  6. DirectFB编程【转】

    本文转载自:http://www.cnblogs.com/274914765qq/p/4358088.html DirectFB编程 一.简介 DirectFB是一个轻量级的提供硬件图形加速,输入设备 ...

  7. 使用ALSA编写自己的音频程序【转】

    本文转载自:http://blog.csdn.net/beyondioi/article/details/6994548 Alsa是Linux高级音频接口.面对众多的音频设备,Alsa为Linux音频 ...

  8. java的list类

    java的list类 目录: list中添加,获取,删除元素: list中是否包含某个元素: list中根据索引将元素数值改变(替换): list中查看(判断)元素的索引: 根据元素索引位置进行的判断 ...

  9. mongodb 3.2配置内存缓存大小为MB/MongoDB 3.x内存限制配置

    mongodb 3.2配置内存缓存大小为MB/MongoDB 3.x内存限制配置 转载自勤奋的小青蛙 mongodb占用内存非常高,这是因为官方为了提升存储的效率,设计就这么设计的. 但是大部分的个人 ...

  10. bzoj3436: 小K的农场(差分约束)

    3436: 小K的农场 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1575  Solved: 690[Submit][Status][Discus ...