>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 25905 个阅读者 刷新本主题
 * 贴子主题:  JavaScript this 关键字 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-12 18:30:58     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript this 关键字

     面向对象语言中 this 表示当前对象的一个引用。

     但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。    
  • 在方法中,this 表示该方法所属的对象。
  • 如果单独使用,this 表示全局对象。
  • 在函数中,this 表示全局对象。
  • 在函数中,在严格模式下,this 是未定义的(undefined)。
  • 在事件中,this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

范例

var   person  =  {
   firstName :  " John " ,
   lastName  :  " Doe " ,
   id        :  5566 ,
   fullName  :  function ( )   {
     return   this . firstName  +  "   "  +  this . lastName ;
   }
} ;

方法中的 this

     在对象方法中, this 指向调用它所在方法的对象。

     在上面一个范例中,this 表示 person 对象。

     fullName 方法所属的对象就是 person。                    

范例

fullName  :  function ( )   {
   return   this . firstName  +  "   "  +  this . lastName ;
}

单独使用 this

    单独使用 this,则它指向全局(Global)对象。

    在浏览器中,window 就是该全局对象为 [object Window>:                    

范例

           var   x  =  this ;

     严格模式下,如果单独使用,this 也是指向全局(Global)对象。                    

范例

" use strict " ;
var   x  =  this ;                                        

函数中使用 this(默认)

     在函数中,函数的所属者默认绑定到 this 上。

     在浏览器中,window 就是该全局对象为 [object Window>:            

范例

function   myFunction ( )   {
   return   this ;
}

函数中使用 this(严格模式)

     严格模式下函数是没有绑定到 this 上,这时候 this  是 undefined。                                            

范例

" use strict " ;
function   myFunction ( )   {
   return   this ;
}

事件中的 this

     在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:                                            

范例

< button   onclick = " this.style.display='none' " >
点我后我就消失了
</ button >

对象方法中绑定

     下面范例中,this 是 person 对象,person 对象是函数的所有者:                    

范例

var   person  =  {
   firstName   :  " John " ,
   lastName    :  " Doe " ,
   id          :  5566 ,
   myFunction  :  function ( )   {
     return   this ;
   }
} ;

范例

var   person  =  {
   firstName :  " John " ,
   lastName  :  " Doe " ,
   id        :  5566 ,
   fullName  :  function ( )   {
     return   this . firstName  +  "   "  +  this . lastName ;
   }
} ;

               说明: this.firstName 表示

    this (person) 对象的  firstName 属性。                              

显式函数绑定

     在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。

     在下面范例中,当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法:                    

范例

var   person1  =  {
   fullName :  function ( )   {
     return   this . firstName  +  "   "  +  this . lastName ;
   }
}
var   person2  =  {
   firstName : " John " ,
   lastName :  " Doe " ,
}
person1 . fullName . call ( person2 ) ;   //  返回 "John Doe"

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-27 09:26:46 重新编辑]
  Java面向对象编程-->多线程(下)
  JavaWeb开发-->在Web应用中访问Web服务
  JSP与Hibernate开发-->Spring、JPA与Hibernate的整合
  Java网络编程-->基于UDP的数据报和套接字
  精通Spring-->绑定CSS样式
  Vue3开发-->Vue Router路由管理器
  JS 闭包的 9 大经典使用场景
  最新的Vue面试题大全含源码级回答,吊打面试官系列
  创建vue cli 插件
  Velocity.js动画库的使用
  深入理解Vue的响应式系统
  Vue用法详解
  史上最全的web前端面试题汇总及答案
  HTML DOM Li 对象
  JavaScript的HTML DOM Input Search 对象
  Javascript DOM封装方法汇总
  CSS3 2D 转换
  HTML5 地理定位
  HTML中插入脚本的用法
  JavaScript的 while 循环语句
  JavaScript编程规范
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。