javascript 跳跃式前进 (5) - 深入浅出 this[六种模式]

简介: this是面向对象编程中的一个概念,一般指向当前方法调用所在的对象,但在JS中灵活很多,为什么这么说呢?那是因为:• this是运行时绑定而非编写时绑定• this的绑定和函数声明的位置木有任何关系,执行上下文取决于函数调用时方式• this既不指向函数自身也不指向词法作用域。So… 谁调用这个函数或方法,this关键字就指向谁这话是并不是完全准确的

版权声明:保留原博文链接及作者的情况下,请尽情转载吧!!!


问this为何物,直教人苦逼不已


this是面向对象编程中的一个概念,一般指向当前方法调用所在的对象,但在JS中灵活很多,为什么这么说呢?那是因为:


  • this是运行时绑定而非编写时绑定
  • this的绑定和函数声明的位置木有任何关系,执行上下文取决于函数调用时方式
  • this既不指向函数自身也不指向词法作用域。


So… 谁调用这个函数或方法,this关键字就指向谁这话是并不是完全准确的


this应当如何确定!


说到这个,就不得不说JS中this的绑定额;JS中有五种绑定模式及一种特殊绑定模式【ES6的箭头函数】;


  • 默认绑定
    默认绑定的this值取决于严格模式非严格模式


var a = 10086;
function test1(){
  console.log(this.a);
}
test1(); 
function test2(){
   "use strict"
    console.log(this.a); 
}
test2();


function test3(a){
       this.a = a;
       console.log(this.a); 
       console.log(a);
    }
    var testv3 = new test3(10086); 


  • 显式绑定(硬绑定) – call , apply , bind
  • call和apply的区域在于传参的方式不同,但是作用基本一致
  • bind是es5的绑定方法,绑定后this无法改变,上面亦是如此


var obj = {a:2}
    function test4(){
        console.log(this.a)
    }
    var testv4 = test4.call(obj); 
    function test5(){
     console.log(this.a)
    }
    var obj2 = {a:10086}
    var testv7 = test7.bind(obj2)
    testv7() 


  • 隐式绑定


  • 隐式绑定是要看是否有上下文对象,调用的时候是否给某个对象拥有或者包含;则该this绑定到该对象中。


function test6(){
       console.log(this.a)
    }
    var obj3 = {
      a:10086,
      test6:test6
    }
    obj3.test6() 
    var obj1 = {a:789 , obj2:obj2}
     var obj2 = { a:456, test8:test8}
     obj1.obj2.test6(); 


总结


  1. 若是把undefined,null作为this绑定对象参数传入call,apply,bind,会采用默认绑定规则,而参数依旧传入;比如你有一个数组想要依次分割传入一个函数中,apply就可以做到;当然,ES6中的拓展运算符也可以做到...【非常实用的一个操作符】,后续再写吧


  1. 在未来ES7 中,有一个关于 bind 语法 的提议,提议将:: 作为一个新的绑定操作符,该操作符会将左值和右值(一个函数)进行绑定;若是能开展,this在一些情况下都可以不用写了
目录
相关文章
|
3月前
|
存储 安全 JavaScript
云计算浪潮中的网络安全之舵探索Node.js中的异步编程模式
【8月更文挑战第27天】在数字化时代的风帆下,云计算如同一片广阔的海洋,承载着企业与个人的数据梦想。然而,这片海洋并非总是风平浪静。随着网络攻击的波涛汹涌,如何确保航行的安全成为了每一个船员必须面对的挑战。本文将探索云计算环境下的网络安全策略,从云服务的本质出发,深入信息安全的核心,揭示如何在云海中找到安全的灯塔。
|
21天前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
9天前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第33天】在JavaScript的世界里,异步编程是提升应用性能和用户体验的关键。本文将带你深入理解异步编程的核心概念,并展示如何在实际开发中运用这些知识来构建更流畅、响应更快的Web应用程序。从回调函数到Promises,再到async/await,我们将一步步解锁JavaScript异步编程的秘密,让你轻松应对各种复杂的异步场景。
|
1月前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模式
【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。
|
1月前
|
JavaScript 前端开发 调度
探索Node.js中的异步编程模式
在Node.js的世界里,异步编程是核心。本文将带你深入了解异步编程的精髓,通过代码示例和实际案例分析,我们将一起掌握事件循环、回调函数、Promises以及async/await等关键概念。准备好迎接挑战,让你的Node.js应用飞起来!
|
1月前
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第33天】在JavaScript的后端领域,Node.js凭借其非阻塞I/O和事件驱动的特性,成为高性能应用的首选平台。本文将深入浅出地探讨Node.js中异步编程的核心概念、Promise对象、Async/Await语法以及它们如何优化后端开发的效率和性能。
25 7
|
2月前
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第15天】在Node.js的世界中,“一切皆异步”不仅是一句口号,更是其设计哲学的核心。本文将带你深入理解Node.js中异步编程的几种主要模式,包括经典的回调函数、强大的Promise对象、以及简洁的async/await结构。我们将通过实例代码来展示每种模式的使用方式和优缺点,帮助你更好地掌握Node.js异步编程的精髓。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启示和思考。让我们一起开启Node.js异步编程的探索之旅吧!
|
2月前
|
JavaScript 前端开发 中间件
深入浅出Node.js中间件模式
【9月更文挑战第13天】本文将带你领略Node.js中间件模式的魅力,从概念到实战,一步步揭示如何利用这一强大工具简化和增强你的Web应用。我们将通过实际代码示例,展示中间件如何在不修改原有代码的情况下,为请求处理流程添加功能层。无论你是前端还是后端开发者,这篇文章都将为你打开一扇通往更高效、更可维护代码的大门。
|
3月前
|
设计模式 JavaScript 前端开发
Vue.js组件设计模式:构建可复用组件库
在Vue.js中,构建可复用组件库是提升代码质量和维护性的核心策略。采用单文件组件(SFC),定义props及默认值,利用自定义事件和插槽进行灵活通信,结合Vuex或Pinia的状态管理,以及高阶组件技术,可以增强组件的功能性和灵活性。通过合理的抽象封装、考虑组件的可配置性和扩展性,并辅以详尽的文档和充分的测试,能够打造出既高效又可靠的组件库。此外,采用懒加载、按需导入技术优化性能,制定设计系统和风格指南确保一致性,配合版本控制、CI/CD流程和代码审查机制,最终形成一个高品质、易维护且具有良好社区支持的组件库。
70 7
|
3月前
|
设计模式 JavaScript 前端开发
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
51 1