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. [RxJS 6] The Catch and Rethrow RxJs Error Handling Strategy and the finalize Operator

    Sometime we want to set a default or fallback value when network request failed. http$ .pipe( map(re ...

  2. 初识ASP.NET---点滴的积累---ASP.NET学习小结

    差点儿相同十多天前学习完了北大青鸟的学习视频,没想到没几天的时间就看完了XML视频和牛腩的Javascript视频.学习完了也该总结总结.理理自己的思路.消化一下自己学习到的东西. 视频中的理论知识并 ...

  3. jenkins下载插件失败解决办法

  4. 小白学开发(iOS)OC_ 字符串写入文件(2015-08-13)

    // //  main.m //  字符串写入文件 // //  Created by admin on 15/8/13. //  Copyright (c) 2015年 admin. All rig ...

  5. C# Path 有关于文件路径等问题类(转)

    C# Path 标签:C#, Path C-Sharp  0 Path handles file path processing. The .NET Framework provides effect ...

  6. 洛谷P2756 飞行员配对方案问题(二分图匹配)

    P2756 飞行员配对方案问题 题目背景 第二次世界大战时期.. 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其 ...

  7. python 10:len(list)(获取列表长度)以及负访问性

    bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(len(bicycles)) #获取某列表长度,即列表元素个数 pr ...

  8. 辨析 singleton 和 prototype

    <bean id="person1" class="com.bean.life.Person"> <property name="n ...

  9. CentOS7 搭建Kafka(三)工具篇

    CentOS7 搭建Kafka(三)工具篇 做为一名懒人,自然不喜欢敲那些命令,一个是容易出错,另外一个是懒得记,能有个工具就最好了,一查还挺多,我们用个最主流的Kafka Manager Kafka ...

  10. JavaScript 进阶 常用内置对象

    一.常用内置对象 所谓内置对象就是ECMAscript提供出来的一些对象,我们知道对象都是有相应的属性和方法 数组Arry 1.数组的创建方式 字面量方式创建(推荐使用,简单粗暴) var color ...