JavaScript基础02--this指向

2022-07-17 23:14:43 浏览数 (1)

先来回顾一下上一小节的作用域问题。

JS作用域JS作用域

在函数内,this是非常特殊的关键词标识符,在每个函数的作用域中被自动创建

当函数被调用,一个上下文就被创建。上下文包括函数在哪调用,谁调用的,参数是哪些,等等,上下文中的this,指的就是函数指行期间的this。this的上下文基于函数调用的情况。和函数在哪定义无关,但是和函数怎么调用有关

this理解的关键:

1:this永远指向一个对象;

2:this的指向完全取决于函数调用的位置;

1、全局

在全局上下文(任何函数以外),this指向全局对象。

代码语言:javascript复制
console.log(this === window); // true

2、函数

在函数内部时,this由函数怎么调用来确定

代码语言:javascript复制
//简单调用,即独立函数调用
function f1(){
  return this;
}
//当前调用者其实是window  window.f1()
f1() === window;

当函数作为对象方法调用时,this指向该对象

代码语言:javascript复制
var obj = {
    type: 1,
    name: 'Tina',
    age: 18,
    sayHi:function(){
        console.log(this)
        console.log('hi~~')
    }
}
//this === obj
obj.sayHi()

3.构造函数

**构造函数的this指向创建的实例对象

代码语言:javascript复制
function Obj (name,age){
    this.name = name
    this.age = age
    this.sayHai= function(){
        console.log(this)
    }
}

let o = new Obj('Tina',18) //{name: 'tina', age: 18}

构造函数执行过程分为4步:

**第一步: 创建一个Object对象实例。

第二步: 将构造函数的执行对象赋给新生成的这个实例。

第三步: 执行构造函数中的代码

第四步: 返回新生成的对象实例

4.call和apply

call和apply可以指定函数运行时的this`

call方法使用的语法规则函数名称.call(obj,arg1,arg2...argN);参数说明:obj:函数内this要指向的对象,arg1,arg2...argN :参数列表,参数与参数之间使用一个逗号隔开

apply方法使用的语法规则

函数名称.apply(obj,[arg1,arg2...,argN])参数说明:obj :this要指向的对象[arg1,arg2...argN] : 参数列表,要求格式为数组

代码语言:javascript复制
function add(c, d){
  return this.a   this.b   c   d;
}

var o = {a:1, b:3};
add.call(o, 5, 7); // 1   3   5   7 = 16
add.apply(o, [10, 20]); // 1   3   10   20 = 34

【小结】

在JavaScript中,this指向是个比较容易忽视的问题,本文从多方面剖析了this的具体应用。长期从事后端开发的工程师们,会觉得原来前端的各种细节也挺多的...

0 人点赞