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

rollback 发布于2019-08-23 17:16 / 3070人阅读

摘要：基础深入函数函数基础什么是函数实现特定功能的条语句的封装体只有函数是可以执行的，其它类型的数据不能执行为什么要用函数提高代码复用便于阅读交流如何定义函数函数声明表达式函数声明表达式如何调用执行函数直接调用通过对象调用调用临时让成为的方法进行

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是什么？

任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window

所有函数内部都有一个变量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();

GPU云服务器云服务器深入理解java基础深入理解javascript 回调函数添加回调函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104070.html

从 IIFE 聊到 Babel 带你深入了解前端模块化发展体系

摘要：我觉得那时他可能并没有料到，这一规则的制定会让整个前端发生翻天覆地的变化。前言作为一名前端工程师，每天的清晨，你走进公司的大门，回味着前台妹子的笑容，摘下耳机，泡上一杯茶，打开 Terminal 进入对应的项目目录下，然后 npm run start / dev 或者 yarn start / dev 就开始了一天的工作。当你需要进行时间的转换只需要使用 dayjs 或者 momentj...

tinylcy 2019-05-23 17:33 评论0 收藏0
前端基础问题整理-JavaScript相关

摘要：请解释事件代理事件代理也称为事件委托，利用了事件冒泡。同源指的是协议域名端口相同，同源策略是一种安全协议。目的同源策略保证了用户的信息安全，浏览器打开多个站点时，互相之间不能利用获取对方站点的敏感信息。请解释事件代理(event delegation) 事件代理也称为事件委托，利用了事件冒泡。例如： item1 item2 item3 当页面li增多时单...

刘东 2019-08-21 14:03 评论0 收藏0
JS学习系列 03 - 函数作用域和块作用域

摘要：在及之前版本，只拥有函数作用域，没有块作用域和除外。函数表达式分为匿名函数表达式和具名函数表达式。但是，由于这个事件回调函数形成了一个覆盖当前作用域的闭包，引擎极有可能依然保存着这个数据结构取决于具体实现。总结函数是中最常见的作用域单元。在 ES5 及之前版本，JavaScript 只拥有函数作用域，没有块作用域（with 和 try...catch 除外）。在 ES6 中，JS 引...

Ashin 2019-08-20 14:28 评论0 收藏0
JavaScript-立即调用函数表达式（IIFE）

摘要：将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。组成这是一个被称为自执行匿名函数的设计模式，主要包含两部分。一、函数声明&函数表达式 1.1 函数声明 (函数语句) showImg(https://segmentfault.com/img/bVbbqvT?w=278&h=166); （1）使用 function 关键字声明一个函数，再指定一个函数名，叫函数声明。...

XUI 2019-08-26 11:55 评论0 收藏0