重温js——函数表达式和this

简介: 我们知道a 里面保存的是函数的引用地址,那么函数的调用是使用 () 来进行调用,保存到某个变量中的函数地址,直接 a() 就能调用该函数了。

函数表达式


js 中,函数也是一个数据,在语法上,函数可以用于任何需要数据的地方


JS中,函数是一等公民,函数还可以放到变量当中。


var a =  function test () {
      // 代码块
}


上面这一块代码是一个函数表达式,test 不会提升到全局。意思是创建一个函数,将其赋值给变量 a


99526d6be69a349d1dcf672282d4cf8c.png


我们知道a 里面保存的是函数的引用地址,那么函数的调用是使用 () 来进行调用,保存到某个变量中的函数地址,直接 a() 就能调用该函数了。


任何可以出现数据的地方,函数就可以出现,函数是引用值类型。


this 关键字


this 是无法赋值的。


1.在全局作用域中,this指向全局,浏览器环境中指向window,node环境非严格模式下指向glob,严格模式下指向undefined。


2.函数作用域中,取决于函数的调用情况


1. 函数是直接调用的,this 是指向全局


3fa713d8e456db9d875a079cc46208f4.png


2. 通过对象来调用,还是对象的一个属性,格式为 对象.属性(), 这种情况,this 是指向对象本身


99619777242b6bae7aa8fe3d97863f5e.png


3. 如果对象中的函数保存到外部,那this就指向当前外部所处的环境,对象中指向对象,全局的话就指向全局。


0e73fee0268863e69aab715b8c87cf41.png


4. 函数如果使用 new 的方式来调用, this 指向当前的当前调用的实例对象


function main(){
    this.aad = 234;
    this.def = function(){
                console.log(this);
            };
    this.foo = function(){
            console.log(this === xxx);
        };
    this.xoo = function(){
            console.log(this === main);
        };
}
var xxx = new main();
xxx.def(); 
xxx.foo();
xxx.xoo();


5. 箭头函数调用,this 指向外部的环境。


  var obj = {
  a: 1,
  b: () => {
    console.log(this, '-b----')
  },
  c: {
    e: 1232,
    d:function(){
       console.log(this, '-d----')
      }
  }
}
obj.b();
obj.c.d();
function test(){
  var a = () => {
    console.log(this,'------函数里面的箭头函数指向')
  }
  a();
}
test();

5652e460b286977da307d1b4112caddd.png


6. dom 中的this 指向dom(事件处理对象).


 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
 </head>
 <body>
   <div onclick="console.log(this)" style="width: 100px;height: 100px;background-color: aliceblue;"></div>
 </body>
 </html>

2c7b82dca4bb932a3ffdf327b4e170dd.png


7. 使用bind、apply、call手动绑定this对象


function hello(thing) {
 console.log(this + " says hello " + thing);
}
hello.call("Yehuda", "world") 


0a0dd8657d8bc388d2bb313b5b4d03e6.png

相关文章
|
5月前
|
设计模式 自然语言处理 JavaScript
JavaScript进阶-函数表达式与闭包
【6月更文挑战第18天】JavaScript函数不仅是代码块,还是值,具备函数表达式和闭包等特性。函数表达式如匿名函数,可赋值、传参,但不提升,过度使用影响可读性。闭包允许访问外部作用域,即使父函数已结束,但不当使用可能导致内存泄漏。理解并妥善处理这些问题,如命名函数表达式、及时释放引用,能提升代码质量。通过实践深化对这些关键概念的理解至关重要。
35 2
|
5月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
60 3
|
4月前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
40 0
|
4月前
|
JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
5月前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
|
5月前
|
存储 JavaScript 前端开发
JavaScript——JavaScript基础:数组 | JavaScript函数:使用、作用域、函数表达式、预解析
在JavaScript中,内嵌函数可以访问定义在外层函数中的所有变量和函数,并包括其外层函数能访问的所有变量和函数。①全局变量:不在任何函数内声明的变量(显式定义)或在函数内省略var声明的变量(隐式定义)都称为全局变量,它在同一个页面文件中的所有脚本内都可以使用。函数表达式与函数声明的定义方式几乎相同,不同的是函数表达式的定义必须在调用前,而函数声明的方式则不限制声明与调用的顺序。③块级变量:ES 6提供的let关键字声明的变量称为块级变量,仅在“{}”中间有效,如if、for或while语句等。
55 0
|
5月前
|
JavaScript 前端开发
JS中如何使用this方法
JS中如何使用this方法
19 0
|
6月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
43 1
|
6月前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
51 2