分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

《你不知道的js》——this全面解析

发布时间:2023-09-06 02:12责任编辑:赖小花关键词:js

默认绑定

//全局对象用于默认绑定function foo(){ ???console.log(this.a)}var a=2;foo(); ?//2
//严格模式下,不能将全局对象用于默认绑定function foo(){ ???‘use strict‘; ???console.log(this.a)}var a=2;foo(); ?//TypeError: this is undefined
//在严格模式下调用foo()则不影响默认绑定function foo(){ ???console.log(this.a)}var a=2;(function(){ ???‘use strict‘; ???foo();})(); ?//2

隐式绑定

//当函数拥有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象function foo(){ ???console.log(this.a)}var obj={ ???a:2, ???foo:foo}obj.foo(); ???//2
//对象属性链中只有上一层或者最后一层在调用位置中起作用function foo(){ ???console.log(this.a)}var obj2={ ???a:42, ???foo:foo}var obj1={ ???a:2, ???obj2:obj2}obj1.obj2.foo(); ???//42
//this 被隐式绑定的函数会丢失绑定对象,也就是说会应用默认绑定,从而把this绑定到全局对象或者undefined上function foo(){ ???console.log(this.a)}var obj={ ???a:2, ???foo:foo} var bar=obj.foo;var a="hello";bar(); ?//hello
//参数传递其实就是隐式传递,因此我们传入函数是也会被隐式赋值function foo(){ ???console.log(this.a)}function doFoo(fn){ ???fn();}var obj={ ???a:2, ???foo:foo}var bar=obj.foo;var a="hello";doFoo(obj.foo) ?//hello
//回调函数丢失this绑定function foo(){ ???console.log(this.a)}var obj={ ???a:2, ???foo:foo} var a="hello";setTimeout(obj.foo,100) ??//hello

显式绑定

//通过foo.call(..),在调用foo时强制把它的this绑定到obj上function foo(){ ???console.log(this.a)}var obj={ ???a:2}foo.call(obj) //2
//硬绑定function foo(){ ???console.log(this.a)}var obj={ ???a:2} var bar=function(){ ???foo.call(obj)};bar(); //2setTimeout(bar,100); ?//2//硬绑定的bar ???不可能再修改它的thisbar.call(window); //2
//硬绑定典型应用场景:创建一个包裹函数,负责接收参数并返回值function foo(something){ ???console.log(this.a,something); ???return this.a + something;}var obj={ ???a:2}var bar=function(){ ???return foo.apply(obj,arguments)}var b=bar(3); ?//2 3console.log(b) ???//5
//硬绑定典型应用场景:创建一个可以重复使用的辅助函数function foo(something){ ???console.log(this.a,something); ???return this.a + something;} ???//简单的辅助绑定函数function bind(fn,obj){ ???return function(){ ???????return fn.apply(obj,arguments) ???}}var obj={ ???a:2}var bar=bind(foo,obj);var b=bar(3); //2 3console.log(b) ?//5

《你不知道的js》——this全面解析

原文地址:https://www.cnblogs.com/fe-cherrydlh/p/9554515.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved