JavaScript 进阶第六章（this与函数的调用模式）

人彘@

按照函数内乱部this的指背差别，能够将函数的挪用形式分红4种

函数挪用形式
办法挪用形式
机关函数挪用形式
高低文挪用形式（借用办法形式）

函数挪用形式

假如一个函数没有是一个工具的属性时，便是被当作一个函数去停止挪用的。此时this指背了window

function fn(){
console.log(this); // 指背window
}
fn();

办法挪用形式

当一个函数被保留为工具的一个属性时，我们称之为一个办法。当一个办法被挪用时，this被绑定到当前工具

const obj = {
sayHi:function(){
console.log(this); // 正在办法挪用形式中，this指背挪用当火线法的工具。
}
}
obj.sayHi();

机关函数挪用形式

假如函数是经由过程new枢纽字停止挪用的，此时this被绑定到创立出去的新工具上。

function Person(){
console.log(this);
}
Person(); // 指背window
var p = new Person(); // this指背Person

高低文挪用形式

也叫高低文形式,分为 apply 取 call
call

call办法能够挪用一个函数，而且能够指定那个函数的this指背

const RichWumon = {
name: "海海",
say: function () {
console.log(this.name, " 您好呀");
}
}
const obj = {
name: "小陈"
}
RichWumon.say(); // 海海
RichWumon.say.call(obj); // 小陈

复造代码

call使用

将真数组转成数组

    let divs = document.querySelectorAll('div');
console.log(divs);
    function change(nodelist) {
console.log(Object.prototype.toString.call(nodelist));
return Array.prototype.slice.call(nodelist);
    }

apply

便是apply()办法承受的是一个包含多个参数的数组。而call()办法承受的是多少个参数的列表

const RichWumon = {
name: "海海",
say: function () {
console.log(this.name, "您好呀");
}
}
const obj = {
name: "小陈"
}
RichWumon.say(); // 海海
RichWumon.say.apply(obj); // 小陈

复造代码

apply使用

1.简化 console.log办法

// 简化log办法
function log() {
console.log.apply(console, arguments);
}

bind办法

bind()办法创立一个新的函数, 能够绑定新的函数的this指背

var name = '海海';
function Fn(){
this.age = 18;
console.log(this.name + this.age);
}
Fn(); // 海海 18
// 返回值：新的函数
// 参数：新函数的this指背，当绑定了新函数的this指背后，不管利用何种挪用形式，this皆没有会改动。
let obj = {
name:'小陈',
}
const newFn = Fn.bind(obj);
newFn(); // 小陈 18

复造代码

this的指背

零丁利用，this 指背齐局工具

console.log(this); // window

函数中的 this 指背齐局工具

function show(){
console.log(this); // window
}
show();

正在函数内乱部，this 的指背正在函数定义的时分是不克不及肯定的，只要函数施行的时分才气肯定

const a = 18;
const obj = {
a: 19,
b: {
a: 20,
c: function () {
console.log(this.a); // 20
}
}
}
obj.b.c();

正在办法中，this 指代该挪用办法的工具

  const obj ={
   name:"海海",
   say:function(){
       console.log(this);       // {name:"海海"}
   }
}

箭头函数中的this指背

箭头函数本人出有this
箭头函数的this是肯定的，且稳定
箭头函数中的this指背创立那个箭头函数地点工具的高低文
上一章：JavaScript 进阶第五章（本型）

下一章：JavaScript 进阶第七章（es6中的class ）

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！

JavaScript 进阶第六章（this与函数的调用模式 ）

浏览过的版块

JavaScript 进阶第六章（this与函数的调用模式）