js调用函数的几种方法_ES5/ES6的函数调用方式

时间: 2018-04-16阅读: 2676标签: 函数

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关


一、ES5函数调用模式

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

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


二、ES5方法调用

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

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


三、ES5构造器调用

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

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


四、ES5间接调用

利用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();
 
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/644

Vue源码中用到的工具函数

以下摘取的函数,在 shared 目录下公用的工具方法。提取了一些常用通用的函数进行剖析,主要包含以下内容创建一个被冻结的空对象:判断是否是 undefined 或 null,判断是否不是 undefined 和 null

js中HttpServletRequest的使用

HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息。

nodejs如何调用函数?

NodeJs中调用函数的方式有多种,可以在内部调用普通函数,还可以调用外部单个函数以及调用外部多个函数等。普通内部函数可以直接调用,外部函数需要先使用module.exports=fun将函数导出,然后就可以直接调用了。

javascript replace高级用法

在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中,这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定,当然也可以使用artTemplate模板来绑定数据,那么artTemplate模板它绑定数据的原理是什么呢?其实它就是利用了replace()方法。

eval到底哪里不好?

为什么要少用eval?eval是 js 中一个强大的方法。都说eval == evil等于true,这篇文章将研讨eval的几个缺点和使用注意事项。

ES6新特性之箭头函数与function的区别

写法不同;在function中,this指向的是调用该函数的对象;而在箭头函数中,this永远指向定义函数的环境。箭头函数不可以当构造函数;function存在变量提升,可以定义在调用语句后;箭头函数以字面量形式赋值,是不存在变量提升的;

什么时候不该使用es6箭头函数?

箭头函数带来了很多便利。恰当的使用箭头函数可以让我们避免使用早期的.bind()函数或者需要固定上下文的地方并且让代码更加简洁。箭头函数也有一些不便利的地方。我们在需要动态上下文的地方不能使用箭头函数:定义需要动态上下文的函数

引用类型作为函数参数何解

在向函数传递引用类型的参数时,相当于把引用类型的地址复制给函数内的一个局部变量,所以局部变量和传入的参数会指向内存中的同一个对象。 局部变量的变化也会映射到传入参数

Js map、reduce、filter 等高阶函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。例如Array.prototype.map,Array.prototype.filter

js中函数表达式和自执行函数表达式的用法总结

立即调用函数表达式:给函数体加大括号,在有变量声明的情形下,没有任何区别.但是,如果只是【自动执行】的情形下,就会不同,因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广