1. 函数的上下文—即函数中this指向问题(二)

上次我们介绍了“函数上下文”this指向问题中两个规则

①1.2 规则 1  :直接圆括号执行,上下文是 window 对象

②1.2 规则 2  :从对象中调用或者数组中枚举执行的函数,上下文是这个对象或者数

下面我们继续介绍关于this指向的一些其它问题:

1.3 规则 3 :定时器直接调用,上下文是 window 对象

var a = 100;
function fun() {
    console.log(this.a)
}
setInterval(fun, 1000);

1. 函数的上下文—即函数中this指向问题(二)

 需要注意的是定时器调用和定时器函数内部调用是有区别的;
下面代码是定时器在调用 obj.fun 函数,所以调用者是定时器

var obj = {
    a: 300,
    fun: function() {
        console.log(this.a++)
    }
}
var a = 100;
setInterval(obj.fun, 1000)

1. 函数的上下文—即函数中this指向问题(二)

下面的代码本质是 obj 在调用函数,所以上下文是 obj;

var obj = {
    a: 300,
    fun: function() {
        console.log(this.a++)
    }
}
var a = 100;
setInterval(function() {
    obj.fun()
}, 1000)

 1. 函数的上下文—即函数中this指向问题(二)

 1.4 规则  4 : DOM 事件中的 this ,指的是触发事件的这个 DOM 元素

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var box4 = document.getElementById('box4');
function changeColor() {
    this.style.backgroundColor = 'purple'
}
box1.onclick = changeColor;
box2.onclick = changeColor;
box3.onclick = changeColor;
box4.onclick = changeColor;

 此时点击的元素变为紫色

1. 函数的上下文—即函数中this指向问题(二)

 1.5 规则 5 : call()和 和 apply()可以设置函数的上下文

函数的上下文主要是看谁在调用,但是我们可以通过 call()和 apply()去设置函数的上下文。

 call()和 apply()本质就是调用函数的同时,指定上下文

比如我们有一个 changeSex 的函数,它的作用是修改 sex 的属性。
此时有一个 xiaohong 对象,sex 为女
此时我们调用这个 changeSex 函数,强行将函数的上下文绑定为 xiaohong

function changeSex() {
    if (this.sex == '男') {
        this.sex = '女'
    } else {
        this.sex = '男'
    }
    console.log(this)
}
var xiaohong = {
    name: '小红',
    sex: '女'
}
changeSex.call(xiaohong)
alert(xiaohong.sex)

 1. 函数的上下文—即函数中this指向问题(二)

 此时小红对象被修改为了

1. 函数的上下文—即函数中this指向问题(二)

apply 函数也有同样的功能

changeSex.apply(xiaohong)

 规范

函数.call(带有上下文内容)
函数.call(带有上下文内容)

 函数的上下文就是带有上下文的内容

需要注意的是 call()和 apply()的本质核心是有区别的:主要是语法上的区别,call 是接受参数,apply 是接受数组

call 方法要求,所有的参数在上下文对象后面一一罗列

function person(name, age, height, weight) {
    this.name = name;
    this.age = age;
    this.height = height;
    this.weight = weight
}
var xiaoming = {
    name: '小明',
    age: 3,
    height: 60,
    weight: 15
}
person.call(xiaoming, '小明', 23, 183, 65)

1. 函数的上下文—即函数中this指向问题(二)

此时我们换成 apply,apply 要求所有的参数必须规整到一个数组中

person.apply(xiaoming, ['小明', 30, 183, 75])

 apply 本质上只要求两个参数,第二个参数是一个数组集合
在使用结果上两种方式都是一样的

 ●小题目

function fun1() {
    fun2.apply(obj, arguments)
}
function fun2(a, b, c) {
    console.log(obj)
    console.log(a)
    console.log(b)
    console.log(c)
}
var obj = {
    name: '小明',
    sex: '男'
}
fun1("香蕉", '葡萄', '梨子')

1. 函数的上下文—即函数中this指向问题(二)

 此时你会发现 apply 有一个功能是将第二个参数将数组进行结构,变成一个个的罗列参数,比如我们传进
arguments 是一个类数组对象,但是我们在 fun2 函数接受的 a,b,c 形参中给进行了解构,也就是分别变成了
香蕉、葡萄、梨子

●小题目

此时我们想根据 apply 的特点出一个思考题,利用 Math 方法进行数组的最大值查找

Math.max.apply(null, [789, 2342, 123, 2134, 2345, 22])

我们知道 apply 第二个参数是数组,但是 apply 有能力给解构,所以,我们可以利用这个特点求数组的最大或者最小值

上一篇:易语言游戏基址内存数据CEAA自动汇编脚本注入及CALL的调用


下一篇:Android sqlite管理数据库基本用法