【4】JavaScript 基础深入——函数、回调函数、IIFE、理解this

栏目: JavaScript · 发布时间: 5年前

JavaScript 基础深入——函数

函数基础

什么是函数?

  • 实现特定功能的 n 条语句的封装体
  • 只有函数是可以执行的,其它类型的数据不能执行

为什么要用函数?

  • 提高代码复用
  • 便于阅读交流

如何定义函数?

  • 函数声明
  • 表达式
function fn1 () { //函数声明
  console.log('fn1()')
}
var fn2 = function () { //表达式
  console.log('fn2()')
}

如何调用(执行)函数?

  • test() :直接调用
  • obj.test() :通过对象调用
  • new test() :new 调用
  • test.call/apply(obj) :临时让 test 成为 obj 的方法进行调用
var obj = {}
function test2 () {
  this.xxx = 'atguigu'
}
// obj.test2()  不能直接, 根本就没有
test2.call(obj) // obj.test2()   // 可以让一个函数成为指定任意对象的方法进行调用
console.log(obj.xxx) // 'atguigu

回调函数

什么函数才是回调函数?

  • 你定义的
  • 你没有调用
  • 但最终它执行了(在某个时刻或某个条件下)

常见的回调函数

  • dom 事件回调函数==> 发生事件的dom元素
  • 定时器回调函数 ===> window
  • ajax 请求回调函数
  • 生命周期回调函数
document.getElementById('btn').onclick = function () { // dom事件回调函数
  alert(this.innerHTML)
}
//定时器
  // 超时定时器
  // 循环定时器
setTimeout(function () { // 定时器回调函数
  alert('到点了'+this)
}, 2000)

IIFE (立即执行函数)

理解

  • 全称: Immediately-Invoked Function Expression

作用

  • 隐藏实现
  • 不会污染外部(全局)命名空间
  • 用它来编码js模块
;(function () { //匿名函数自调用
  var a = 3
  console.log(a + 3)
})()

var a = 4
console.log(a)

;(function () {
  var a = 1
  function test () {
    console.log(++a)
  }
  window.$ = function () { // 向外暴露一个全局函数
    return {
      test: test
    }
  }
})()

$().test() // 1. $是一个函数 2. $执行后返回的是一个对象

函数中的 this

this 是什么?

this

如何确定 this 的值?

  • test() : window
  • p.test() : p
  • new test() : 新创建的对象
  • p.call(obj) : obj
function Person(color) {
  console.log(this)
  this.color = color;
  this.getColor = function () {
    console.log(this)
    return this.color;
  };
  this.setColor = function (color) {
    console.log(this)
    this.color = color;
  };
}

Person("red"); //this是谁? window

var p = new Person("yello"); //this是谁? p

p.getColor(); //this是谁? p

var obj = {};
p.setColor.call(obj, "black"); //this是谁? obj

var test = p.setColor;
test(); //this是谁? window

function fun1() {
  function fun2() {
    console.log(this);
  }
  fun2(); //this是谁? window
}
fun1();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

重来

重来

[美] 贾森·弗里德、[丹] 戴维·海涅迈尔·汉森 / 李瑜偲 / 中信出版社 / 2010-10 / 36.00元

大多数的企业管理的书籍都会告诉你:制定商业计划、分析竞争形势、寻找投资人等等。如果你要找的是那样的书,那么把这本书放回书架吧。 这本书呈现的是一种更好、更简单的经商成功之道。读完这本书,你就会明白为什么计划实际上百害而无一益,为什么你不需要外界投资人,为什么将竞争视而不见反倒会发展得更好。事实是你所需要的比你想象的少得多。你不必成为工作狂,你不必大量招兵买马,你不必把时间浪费在案头工作和会议......一起来看看 《重来》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具