立即执行函数和函数劫持

一、立即执行函数（IIFE）

在函数声明后立即调用

1. 实现方式

（1）用圆括号将函数的定义包裹起来

//匿名的立即执行函数
(function(){
    //函数体
}())
//有函数名的立即执行函数
(function(test){
    //函数体
}())
 
//带参数的立即执行函数
(function test(name){
    console.log(name)
}('卡卡西'))

（2）先用圆括号将函数的定义部分包裹起来，然后再加上调用的圆括号

(function(){
    //函数体
})()
//带参数的立即执行函数
(function test(id){
    console.log(id)
})('9527')

强调：用圆括号包裹的原因是将函数变成一个表达式，这样在页面被加载时、js程序执行时，函数就被立即调用

2. 立即执行函数的作用

（1）不需要为函数命名，避免污染全局变量。

（2）创建一个独立作用域，这个作用域里面的变量，外部访问不到，避免变量污染。

（3）闭包和私有数据

(function(){
    var k = 100
    console.log('k=',k)
})()
console.log(k)//无法执行，直接报错

3. 使用场景

（1）在页面加载完成后，需要立即执行的一些初始化设置，例如时间处理，创建对象等。

（2）在应用中只执行一次的代码

4. 返回值

（1）定义变量接收立即执行函数的返回值

let result = (function(){
    var num = 888
    return num
})()

（2）立即执行函数返回值是一个函数

let fun = (function(){  //fun接收返回的函数，fun就成一个函数
    var num = 888
    return function(){ //返回一个函数
        return num
    }
})()
console.log(fun())

5. 带单目运算符的立即执行函数

（1）单目运算符(一元运算符)：参加运算的对象的只有一个

 +、- 、!、~

（2）在函数定义之后加上圆括号，在function前加上单目运算符，可以使函数变成立即执行函数。单目运算符的作用是进行语法检查

-function foo(){//带函数名的函数
    console.log("Hello World!")
}()
+function(){//匿名函数
    console.log('Hello World!')
}()

二、函数劫持

即在一个函数运行之前把它劫持下来，添加我们想要的功能。当这个函数实际运行的时候，它已经不是原本的函数了，而是带上了被我们添加上去的功能。这也是我们常见的【钩子函数】的原理之一。

示例：

let _log = console.log  //将console.log的原有功能保存到_log中
    console.log = function(str){  //对console.log进行劫持：添加新的功能
        _log(str + '戈薇') //在console.log原有输出功能之外，加入新的信息
    }
console.log('Hello')

this关键字的引用劫持：改变this的指向，通过一些特殊的方法来自己指定函数的调用者

1. 通过call()方法劫持this

var obj = {
    name: '郭靖',
    fun: function(n1,n2){
        let age = n1
        let height = n2
        console.log('姓名：',this.name) //this指向obj
        console.log('年龄：',age)
        console.log('身高：',height)
    }
}
var obj2= {
    name: '杨康'
}
obj.fun(21,180) //未劫持
console.log('----------------------')
obj.fun.call(obj2,21,180) //通过调用call函数将fun函数中的this进行劫持，this指向了obj2

2. 通过apply()方法劫持this

var obj = {
    name: '郭靖',  
    fun: function(n1,n2){
        let age = n1
        let height = n2
        console.log('姓名：',this.name) //this指向obj
        console.log('年龄：',age)
        console.log('身高：',height)
    }
}
var obj2= {
    name: '杨康'
}
obj.fun(21,'180cm') //未劫持
console.log('----------------------')
obj.fun.apply(obj2,[22,'175cm']) //通过调用apply函数将fun函数中的this进行劫持，this指向了obj2

var arr = [10,23,34,45,67,99,2]
// 方法一
// let max = Math.max(...arr)//...arr进行解构
// console.log(max)
// 等价
// 方法二
let max =Math.max.apply(arr,arr)//let max = Math.max(...arr)
console.log(max)

3. 通过bind()方法劫持this

bind()方法就是在函数设计的时候就指定函数的调用者，也就是指定函数中this的指向；其参数传入形式和call方法一样，是直接传入参数。

let obj2 = {
    name: '杨康',
    age: 20,
    height: '180cm'
}
let obj = {
    name: '郭靖',
    age: 21,
    height: '175cm',
    fun: function(){
        console.log('姓名：',this.name) //this指向obj
        console.log('年龄：',this.age)
        console.log('身高：',this.height)
    }.bind(obj2)
}
obj.fun()

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79772.html

立即执行函数和函数劫持

一、立即执行函数（IIFE）

二、函数劫持

相关推荐

分享到: