• 400-650-7353

    精品课程

    您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】ES5及ES6this详解

    【Web前端基础知识】ES5及ES6this详解

    • 发布: 优就业it培训
    • 来源:优就业
    • 2021-03-22 16:34:27
    • 阅读()
    • 分享
    • 手机端入口

    今天,我们学习一下JavaScript中的this。我们从什么是this,ES5及ES6中this的几种情况进行学习。让this变的so easy,我们这里说的都是非严格模式下。

    什么是this

    this表示当前行为执行的主体,在javaScript中this不是函数独有的,但是我们主要研究的是函数中的this,为了方便大家理解我们举个例子。

    小明今天项目成功上线了,提前下班,不用加班了,奖励自己去肯德基吃一个汉堡,对于这句话我们简单的分析下:

    在哪里吃:肯德基

    谁吃:小明

    在这里肯德基是吃的环境,小明是当前吃这个行为的主体。

    1. //全局作用域下 
    2. Var myBody = document.body; 
    3. //window是可以省略的  当前body元素的宽度都会被输出 
    4. console.log(window.getComputedStyle(myBody).width;);//726px 
    5. console.log(getComputedStyle(myBody).width;);//726px 
    6. //我们在这里输出this  ->window 
    7. console.log(this);//window   

    ES5中this的几种情况

    1.全局作用域下的this是window

    前边的我们说过this代表当前行为执行的主体,在全局作用域下所有的属性和方法都是window的属性和方法,并且window是可以省略的。那么也就是说我们去调用一个方法在全局作用域下,谁调用的也就是window调用,那么window就是当前行为执行的主体,和去肯德基吃汉堡是一样的谁吃小明,那么小明就是当前行为执行的主体。

    2.自执行函数中的this是window

    在javaScript中我们主要研究的是函数中的this,自执行函数中的this永远是window,因为函数就是一个方法,一种行为,这个行为是直接执行的,那么执行的主体就是window。

    1. //这里我们写两个自执行函数 
    2. ~function(){ 
    3. console.log(this);  //->window 
    4. }(); 
    5.  
    6. (function (){ 
    7. console.log(this);//->window 
    8. })(); 

    3.当前函数执行就看前面有没有点(.),点前面是谁this就是谁,和当前函数在哪里定义的及在哪里执行的没有关系,没有点就是window.

    还是一样的道理,.前面就表示当前行为执行的主体。如果没有依然当前行为执行的主体是window.

    1. //定义一个函数 
    2. function hello(){ 
    3. console.log(this); 
    4. hello();//this->window 
    5. //定义一个对象设置属性为hello值是对应的那个函数 
    6. Var obj = {hello:hello}; 
    7. //我们再去调用的时候  发现是obj这个对象调用的这个函数  那么obj就是当前行为执行的主体  和这个函数在哪里定义是没有关系的。 
    8. Obj.hello(); //this->obj 

    4.call,apply,bind改变this指向问题就看方法中的第一个参数是谁this就是谁。

    首先call,apply,bind这三个方法都是用来改变this的指向,其实本质就是改变当前行为执行的主体。由于这个三个方法第一个参数传递都是当前行为执行的主体。所以就看第一个参数即可。

    1. //定义一个函数 
    2. function world(){ 
    3.    console.log(this); 
    4. //定义一个对象 
    5. Var obj = {name:”哈哈”}; 
    6. //将obj变为这个方法行为执行的主体 
    7. World.call(obj);//this->obj 
    8. //apply和bind同理只是传递参数和使用方式略有不同 

    ES6中this的几种情况

    1.箭头函数是没有自己this的,this是继承它的宿主环境(上级作用域) 宿主环境不是执行的环境,而是定义的环境。

    1. let fn = () => { 
    2.     console.log(this); 
    3.  
    4. fn();//this->window 
    5.  let obj = { 
    6.   name: "obj", 
    7.   sum: function () { 
    8.    fn(); //在widnow下定义的,所以它的宿主环境是widnow而不是sum 
    9.    } 
    10.  }; 

    2. ES6类构造器中的this是当前这个实例,而原型上的函数中的this指向调用者。

    1. //类中的this 
    2.         class Btn { 
    3.             constructor(tagName) { 
    4.                 this.btn = document.querySelector(id); 
    5.                 thisthis.btn.onclick = this.click; 
    6.                 console.log(this); //this->这个类的实例 
    7.             } 
    8.             click() { 
    9.                 // 方法里的this指向调用者 
    10.                 console.log(this); //this->btn这个元素 
    11.             } 
    12.         } 
    13.         var btn = new Btn('input'); 
    14.      

     

    课程好礼申请领取
    您的姓名
    您的电话
    意向课程
     

    中公优就业

    官方QQ

    扫描上方二维码或点击一键加群,免费领取价值599元网课,加群暗号:599。 一键加群

    >>本文地址:
    注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

    推荐阅读

    优就业:ujiuye

    关注中公优就业官方微信

    • 关注微信回复关键词“大礼包”,领80G学习资料
    QQ交流群
    领取免费网课
    (加群备注“网站”)
    IT培训交流群 加入群聊 +
    软件测试 加入群聊 +
    全链路UI/UE设计 加入群聊 +
    Python+人工智能 加入群聊 +
    互联网营销 加入群聊 +
    Java开发 加入群聊 +
    PHP开发 加入群聊 +
    VR/AR游戏开发 加入群聊 +
    大前端 加入群聊 +
    大数据 加入群聊 +
    Linux云计算 加入群聊 +
    优就业官方微信
    扫码回复关键词“大礼包”
    领取80G学习资料

    测一测
    你适合学哪门IT技术?

    1 您的年龄

    2 您的学历

    3 您更想做哪个方向的工作?

    获取测试结果
     
    课程资料、活动优惠 领取通道
     
     
    韩国毛茸茸的丰满妇女,亚洲国内自拍愉拍,高清性色生活片97,亚洲日本成本人观看 网站地图