1, ce point
Le point de ceci est déterminé lorsque nous appelons la fonction, et la différence dans la méthode d'appel en détermine le point.
Dirigez généralement vers notre interlocuteur.
| Méthode d'appel | cela indique |
|---|---|
| Appel de fonction ordinaire | la fenêtre |
| Appel du constructeur | Les méthodes de l'objet prototype de l'objet d'instance pointent également vers l'objet d'instance |
| Appel de méthode objet | L'objet auquel appartient la méthode |
| Appel de méthode de liaison d'événement | Objet d'événement lié |
| Fonction minuterie | la fenêtre |
| Exécuter la fonction immédiatement | la fenêtre |
2. Modifiez ce point dans la fonction
js nous fournit spécifiquement des méthodes de fonction pour nous aider à traiter plus élégamment le problème de ce pointage à l'intérieur de la fonction. Il existe trois méthodes couramment utilisées: bind (), call () et apply ()
1 、 appel ()
La méthode call () appelle un objet, ce qui est simplement compris comme le moyen d'appeler une fonction, mais elle peut changer le point this de la fonction (l'héritage peut être obtenu).
fun.call(thisArg,arg1,arg2)
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a + b);
};
fn.call(o, 1, 2);
// call 第一个可以调用函数 第二个可以改变函数内的this 指向
// call 的主要作用可以实现继承
function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son(uname, age, sex) {
Father.call(this, uname, age, sex);
}
var son = new Son('刘德华', 18, '男');
console.log(son);
2 、 appliquer ()
La méthode apply () appelle une fonction, qui est simplement comprise comme le moyen d'appeler la fonction, mais elle peut changer le point this de la fonction.
fun.apply(thisArg,[argsArray])
- thisArg: cette valeur spécifiée lorsque la fonction fun est en cours d'exécution
- argsArray: la valeur transmise doit être incluse dans le tableau
- La valeur de retour est la valeur de retour de la fonction, car c'est la fonction appelante
// 2. apply() 应用 运用的意思
var o = {
name: 'andy'
};
function fn(arr) {
console.log(this);
console.log(arr); // 'pink'
};
fn.apply(o, ['pink']);
// 1. 也是调用函数 第二个可以改变函数内部的this指向
// 2. 但是他的参数必须是数组(伪数组)
// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
// Math.max();
var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);
3 、 lier ()
La méthode bind () n'appelle pas la fonction, mais peut changer le this interne pour qu'il pointe vers
fun.bind (thisArg, arg1, arg2, ...)
S'il y a une fonction que nous n'avons pas besoin d'appeler immédiatement, mais que nous voulons changer le point this à l'intérieur de cette fonction, utilisez bind à ce moment
- La valeur de retour est une copie de la fonction d'origine modifiée par la valeur spécifiée et les paramètres d'initialisation
// <button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
// 改变函数内this指向 js提供了三种方法 call() apply() bind()
// 3. bind() 绑定 捆绑的意思
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2);
f();
// 1. 不会调用原来的函数 可以改变原来函数内部的this 指向
// 2. 返回的是原函数改变this之后产生的新函数
// 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
// 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
// var btn1 = document.querySelector('button');
// btn1.onclick = function() {
// this.disabled = true; // 这个this 指向的是 btn 这个按钮
// // var that = this;
// setTimeout(function() {
// // that.disabled = false; // 定时器函数里面的this 指向的是window
// this.disabled = false; // 此时定时器函数里面的this 指向的是btn
// }.bind(this), 3000); // 这个this 指向的是btn 这个对象
// }
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
this.disabled = true;
setTimeout(function() {
this.disabled = false;
}.bind(this), 2000);
}
}
</script>