美文网首页js 世界
函数表达式和this

函数表达式和this

作者: 前端末晨曦吖 | 来源:发表于2022-07-09 20:31 被阅读0次

函数表达式

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

js中,函数还可以放到变量当中。

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

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

1.png

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

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

this 关键字

在全局作用域中,this指向全局,浏览器环境中指向window,node环境非严格模式下指向glob,严格模式下指向undefined。
函数作用域中,取决于函数的调用情况

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

[图片上传失败...(image-14a7dc-1657369618587)]

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

2.png

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

3.png

函数如果使用 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();

箭头函数调用,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();
4.png

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>
5.png

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

function hello(thing) {
 console.log(this + " says hello " + thing);
}

hello.call("Yehuda", "world") 
6.png

相关文章

  • 函数

    函数声明和函数表达式有什么区别 函数声明 函数表达式 函数声明和函数表达式的区别: 函数声明必须给定函数名称,函数...

  • JavaScript 函数

    函数声明和函数表达式 函数声明和函数表达式都是创建函数的方法; 函数声明会触发函数提升,而函数表达式不会;前置不前...

  • 进阶3

    函数声明和函数表达式 函数声明:function functionName(){}  函数表达式:var fn =...

  • 进阶-3

    1.函数声明和函数表达式有什么区别 构造函数常用的两种方法:函数声明和函数表达式 //函数表达式 var s =...

  • 函数与作用域

    函数声明和函数表达式有什么区别 函数声明 函数表达式 区别 函数表达式结束后需要加;表示声明变量结束。 函数表达式...

  • 函数声明和函数表达式

    函数声明和函数表达式 函数声明: 函数表达式 区别:解析器在向执行环境中加载数据时,对函数声明和函数表达式的解析是...

  • javascript 之 IIFE(立即执行函数表达式)

    函数表达式和函数声明 var test=function(){} #函数表达式 function test(){}...

  • js ------ 函数声明和函数表达式

    js创建对象几种方式 js 函数声明 和 函数表达式函数声明 函数表达式 函数表达式: 下面的函数都会直接运行

  • 函数与作用域

    函数声明和函数表达式有什么区别 - 函数声明:function functionName(){}  - 函数表达式...

  • task17

    **函数声明和函数表达式有什么区别 **函数声明:function functionname(){};函数表达式:...

网友评论

    本文标题:函数表达式和this

    本文链接:https://www.haomeiwen.com/subject/ywsibrtx.html