带你学习Javascript中的函数进阶(一)

叫我詹躲躲 2020-11-06 20:37:34
学习 函数 javascript 进阶 带你


1. 函数的定义和调用

1.1 函数的定义方式

  1. 函数声明方式function关键字(命名函数)
  2. 函数表达式(匿名函数)
  3. new Function()
var fn = new Function('参数1', '参数2',...,'函数体')
  • Function里面参数都必须是字符串格式
  • 第三种方式执行效率低,也不方便书写,用的比较少
  • 所有函数都是Function的实例(对象)
//函数声明方式
function fn() {
}
//函数表达式(匿名函数)
var fn = function() {
}
//利用new Function('arg1','arg2', 'fn')
var f = new Function('a','b',console.log(a+b)')
f(1,2) // 3

所有的函数都是Function实例对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BJzzyoaF-1583129073592)(https://cdn.nlark.com/yuque/0/2020/png/148146/1583069785134-c58604dc-ecf6-4d54-8cb6-bd43338329db.png#align=left&display=inline&height=303&name=image.png&originHeight=606&originWidth=1678&size=255639&status=done&style=none&width=839)]

1.2 函数的调用方式

  1. 普通函数
  2. 对象的方法
  3. 构造函数
  4. 绑定事件函数
  5. 定时器函数
  6. 立即执行函数
// 普通函数
function fn() {

console.log('前端岚枫博客')
}
fn() //前端岚枫博客
//对象的方法
var obj = {

say: function () {

console.log('前端岚枫博客')
}
}
obj.say() //前端岚枫博客
//构造函数
function Star() {

}
new Star()
//绑定的事件函数
btn.onclick = function() {
} //点击了按钮就可以调用该函数
//定时器函数
setInterval(function() {
}, 1000)
//立即执行函数
(function() {

console.log('前端岚枫博客') //自动调用
})()

2. this

2.1 函数内this的指向

这些this的指向,是当调用函数的时候确定的调用方法的不同决定了this的指向不同,一般指向调用者。
调用方式

调用方式 this指向
普通函数调用 window
构造函数调用 实例对象 原型对象里面的方法也指向实例对象
对象方法调用 该方法所属对象
事件绑定方法 绑定事件对象
定时器函数
window
立即执行函数 window

2.2 改变函数内部this指向

Javascript为提供了一些函数方法来帮助我们更优雅地处理函数内部this的指向问题,常用的有bind()、call()、apply()三种方法。接下来,我们来详细的介绍一下这三种方法的用法,看看它们是如何改变this指向的。

  1. call方法

call()方法调用一个对象,简单理解为调用函数的方式,但是它可以改变函数的this指向。

fn.call(thisArg, arg1, arg2, ...)
var obj = {

name: 'lanfeng'
}
function fn(a, b) {

console.log(this)
console.log(a+b)
}
fn(1,2)//指向window, 3
fn.call(obj, 1, 2) //指向obj, 3
//实现继承
function Father(uname, age, sex) {

this.uname = uname
this.age = age
this.sex = sex
}
function Son () {

Father.call(this,uname, age, sex)
}
var son = new Son('柳岩',18,'女')

call:第一个可以调用函数,第二个可以改变函数内的this指向
call的主要作用可以实现继承

  1. apply方法

apply()方法调用一个函数。简单理解为调用函数的方式,它与call方法一样可以改变函数的this的指向,但是它跟call传参数方式不一样,它是传的参数必须在一个数组里

fun.apply(thisArg, [argsArray])
  • thisArg:在fun函数运行时指定this的值
  • argsArray: 传递的值,必须包含在数组里面
  • 返回值就是函数的返回值,因为它就是调用函数
var obj = {

name: 'lanfeng'
}
function fn(a, b) {

console.log(this)
console.log(a+b)
}
fn(1,2)//指向window, 3
fn.apply(obj, [1, 2]) //指向obj, 3

apply:第一个可以调用函数,第二个可以改变函数内的this指向
apply的参数必须时数组(伪数组)
apply的主要应用,求数数组中的最大值,最小值

var arr = [1, 66, 3, 99, 4]
var max = Math.max.apply(Math, arr)
var min = Math.min.apply(Math, arr)
console.log(max, min) //99 1
  1. bind方法

bind()方法不会调用函数,但是能改变函数内部this指向

fn.bind(thisArg, arg1, arg2, ...)
  • thisArg: 在fn函数运行时指定的this值
  • arg1, arg2: 传递的其他参数
  • 返回由指定的this值和初始化参数改造的原函数拷贝
var obj = {

name: 'lanfeng'
}
function fn(a, b) {

console.log(this)
console.log(a+b)
}
fn(1,2)//指向window, 3
var f = fn.bind(obj, 1, 2)
f()

bind: 不会调原来的函数,可以改变this指向,返回的函数是改变this之后产生的新函数
bind的应用: 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind

var btn = document.querySelector('button')
//以前的用法
btn.onclick = function() {

var that = this
this.disabled = true
setTimeout(function(){

that.disabled = false
}, 3000)
}
// bind用法
btn.onclick = function() {

this.disabled = true
setTimeout(function(){

this.disabled = false
}.bind(this), 3000)
}

2.3 call apply bind 总结

相同点:
都可以改变函数内部的this指向
区别点:

  1. call 和apply 会调用函数,并且改变函数内部的this指向
  2. call和apply传递的参数不一样,call传递参数形式arg1, arg2, …形式,apply必须数组形式
  3. bind不会调用函数,可以改变函数内部的this指向

主要应用场景:

  1. call经常做继承
  2. apply经常跟数组有关系,比如借助于数学对象实现数组的最大值最小值
  3. bind不调用函数,但是还想改变this指向,比如改变定时器的内部this指向

总结

本篇文章主要分享了javascript的函数定义、用法、this及改变this指向的几种方法

版权声明
本文为[叫我詹躲躲]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/3995971/blog/4558940

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云