JS面向对象：this全解

最新推荐文章于 2024-09-11 10:56:43 发布
置顶 最新推荐文章于 2024-09-11 10:56:43 发布
阅读量757 收藏 1
点赞数
分类专栏： 前端技术笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44145258/article/details/107598662
版权

文章目录

  • 全局上下文中的THIS是WINDOW；
  • 块级上下文中没有自己的THIS,它的THIS是继承所在上下文中的THIS的；
  • 在函数的私有上下文中，THIS的情况会多种多样
  • THIS不是执行上下文(EC才是执行上下文)，THIS是执行主体

声明函数的四种方式

let f1 = new Function("x", "y", "return x + y");
function f2 (){};
let f3 = function() {};
let f4 = (x, y) => x + y;
  • 前三种支持this/arguments/new
  • 最后一种f4是es6新语法，不支持this/arguments/new
  • f4箭头函数中的this就是该函数声明所在的环境（上下文）

如何区分执行主体

  1. 事件绑定：给元素的某个事件行为绑定方法，当事件行为触发，方法执行，方法中的THIS是当前元素本身（特殊：IE6~8中基于attachEvent方法实现的DOM2事件绑定，事件触发，方法中的THIS是WINDOW而不是元素本身）
  2. 普通方法执行（包含自执行函数执行、普通函数执行、对象成员访问调取方法执行等）：只需要看函数执行的时候，方法名前面是否有“点”，有“点”，“点”前面是谁THIS就是谁，没有“点”THIS就是WINDOW[非严格模式]/UNDEFINED[严格模式]
  3. 构造函数执行new Func：构造函数体中的THIS是当前类的实例
  4. ES6中提供了箭头函数: 箭头函数没有自己的THIS，它的THIS是继承所在上下文中的THIS
  5. 可以基于CALL/APPLY/BIND等方式，强制手动改变函数中的THIS指向：这三种模式是和直接很暴力的（前三种情况在使用这三个方法的情况后，都以手动改变的为主）

事件绑定


    // 事件绑定 DOM0  DOM2
    let body = document.body;
    body.onclick = function () {
        // 事件触发，方法执行，方法中的THIS是BODY
        console.log(this);
    };
    body.addEventListener('click', function () {
        console.log(this); //=>BODY
    });
    // IE6~8中的DOM2事件绑定
    box.attachEvent('onclick', function () {
        console.log(this); //=>WINDOW
    });

普通方法执行

前面没有执行主体，this就默认指向window

    (function () {
        console.log(this); //=>window
    })();
    let obj = {
        fn: (function () {
            console.log(this); //=>window
            return function () { }
        })() //把自执行函数执行的返回值赋值给OBJ.FN
    };

let obj = {
    fn: (function () {
    	// 自执行函数 this => window
        return function () {
            console.log(this);
        }
    })()
};
obj.fn();	// obj
let fn = obj.fn;
fn();	// window

原型链中的this

[].slice(); //=>数组实例基于原型链机制，找到ARRAY原型上的SLICE方法（[].slice），然后再把SLICE方法执行，此时SLICE方法中的THIS是当前的空数组
Array.prototype.slice(); //=>SLICE方法执行中的THIS：Array.prototype
[].__proto__.slice(); //=>SLICE方法执行中的THIS：[].__proto__===Array.prototype

构造函数执行

构造函数体中的THIS在“构造函数执行”的模式下，是当前类的一个实例，并且THIS.XXX=XXX是给当前实例设置的私有属性

function Func() {
    this.name = "F";
    console.log(this); 
}
Func.prototype.getNum = function getNum() {
    // 而原型上的方法中的THIS不一定都是实例，主要看执行的时候，“点”前面的内容
    console.log(this);
};
let f = new Func;
f.getNum();
f.__proto__.getNum();
Func.prototype.getNum();

箭头函数执行

不建议乱用箭头函数（部分需求用箭头函数还是很方法便的）

let obj = {
    func: function () {
        console.log(this);
    },
    sum: () => {
        console.log(this);
    }
};
obj.func(); //=>THIS:OBJ
obj.sum(); //=>THIS是所在上下文(EC(G))中的THIS:WINDOW
obj.sum.call(obj); //=>箭头函数是没有THIS，所以哪怕强制改也没用  THIS:WINDOW

定时器中的匿名回调函数

回调函数中的THIS一般都是WINDOW（但是有特殊情况）

解决方法
1、用于保存this的变量_this

let obj = {
	i: 0,
	// func:function(){}
	func() {
		// THIS:OBJ
		let _this = this;
		setTimeout(function () {
			// THIS:WINDOW 回调函数中的THIS一般都是WINDOW（但是有特殊情况）
			_this.i++;
			console.log(_this);
		}, 1000);
	}
};
obj.func();

2、基于bind把函数中的this预先处理

let obj = {
	i: 0,
	func() {
		setTimeout(function () {
			// 基于BIND把函数中的THIS预先处理为OBJ
			this.i++;
			console.log(this);
		}.bind(this), 1000);
	}
};
obj.func();

3、箭头函数中没有自己的THIS，用的THIS是上下文中的THIS，也就是obj

let obj = {
	i: 0,
	func() {
		setTimeout(() => {
			this.i++;
			console.log(this);
		}, 1000);
	}
};
obj.func();

隐式的this

js会自动给你传入this

fn(1, 2) === fn.call(undefined, 1, 2);
obj.method("hi") === obj.method.call(obj, "hi");
arr[0](1, 2); === arr[0].call(arr, 1, 2)

例如

let fn = function(x, y){console.log(this)};
fn(1, 2)

let obj = {
  fn
}
obj.fn(1, 2)	// 

let arr = [fn, 2];
arr[0](1,2);

在这里插入图片描述

手动改变this

call

call 原理

let res = fn.call(obj, 10, 20);
console.log(res);
  1. fn首先基于__proto__找到Function.prototype.call，并且让call方法执行
  2. 在call方法执行的过程中(call方法中的this->fn)，把fn执行，并且让fn中的this变为传递的第一个参数obj，
  3. 再并且把10/20当做实参传递给fn，最后接收fn执行的返回值，把返回值作为call方法的返回值返回

call应用：把类数组转换为数组

  • arguments虽然是类数组，但是结构和数组一样（除了__proto__不是Array.prototype）
  • 所以操作数组的代码和操作arguments基本一致的（尤其是循环这种东西）
  • 如果我能让ARRAY原型上的slice执行，让方法中的this变为arguments，相当于把arguments转换为一个数组
  • 只要两个实例结构类似，那么大部分操作操作的他们方法都可以公用，无外乎就是THIS指向的问题

类数组操作

    var arr = [];
    for (var i = 0; i < arguments.length; i++) {
        arr.push(arguments[i]);
    }
    return arr;

让slice方法中的this变为arguments

    [].slice.call(arguments)
    Array.prototype.slice.call(arguments)

    let utils = (function () {
        function toArray() {
            return [].slice.call(arguments);
        }
        return {
            toArray
        };
    })();
    let ary = utils.toArray(10, 20, 30); //=>[10,20,30]
    console.log(ary);
    ary = utils.toArray('A', 10, 20, 30); //=>['A',10,20,30]
    console.log(ary);

使用forEach

[].forEach.call(arguments, item => {})

手写call

如何让fn中的this变为obj => obj.fn() => 需要保证fn函数作为obj某个成员的属性值

思路：把函数作为要改变的THIS对象的一个成员，然后基于对象的成员访问执行函数即可obj.fn=fn; obj.fn();

原理如图：对象.属性成员访问时，this指向对象本身
在这里插入图片描述

Function.prototype.call = function call(context, ...params) {
    context = context == null ? window : context;

    let result;
    // 把函数作为对象的某个成员值
    context["fn"] = this;
    // 基于 对象[成员]() 方式把函数执行，此时函数中的this就是对象，（把参数传递给函数，并且接收返回值）
    result = context["fn"](...params);
    // 设置的成员用完后删掉
    delete context["fn"];
    // 把函数的返回值作为call方法执行的结果返回
    return result;
}
  1. 如果原始对象里有名为fn的属性，就会覆盖掉
    解决办法：通过Symbol创建一个唯一值
  2. context必须是个对象，否则无法设定属性值

    1. 如果不是对象，可以利用其构造函数的constructor转为对应类型，但是注意此方法不适用symbol和bigint类型，他们不允许被new
      在这里插入图片描述

    2. 也可以通过Object()转为对象

优化

Function.prototype.call = function call(context, ...params) {
    context = context == null ? window : context;
    // 必须要保证CONTEXT得是一个对象
    let contextType = typeof context;
    if (!/^(object|function)$/i.test(contextType)) {
        // context.constructor：当前值所属的类 
        // context = new context.constructor(context);  //=>不适合Symbol/BigInt
        context = Object(context);
    }

    let result;
    let key = Symbol('KEY');
    // 把函数作为对象的某个成员值（成员名唯一：防止修改原始对象的结构值）
    context[key] = this;
    // 基于“对象[成员]()”方式把函数执行，此时函数中的THIS就是对象（把参数传递给函数，并且接收返回值）
    result = context[key](...params);
    // 设置的成员用完后删除掉
    delete context[key];
    // 把函数的返回值作为CALL方法执行的结果返回
    return result;
};

call 的深层理解

var name = 'lc';
function A(x, y) {
    var res = x + y;
    console.log(res, this.name);
}
function B(x, y) {
    var res = x - y;
    console.log(res, this.name);
}
B.call(A, 40, 30);  // 10 "A"
B.call.call.call(A, 20, 10);    // => A.call(20, 10) => NaN undefined
Function.prototype.call(A, 60, 50); // 无任何输出
Function.prototype.call.call.call(A, 80, 70);   // NaN undefined

根据call源码拆分每一步

B.call(A,40,30);	// 10 "A"

在这里插入图片描述

B.call.call.call(A, 20, 10);	// NaN undefined

在这里插入图片描述

Function.prototype.call(A, 60, 50);

在这里插入图片描述

Function.prototype.call.call.call(A, 80, 70);

同第二步

bind

想要改变点击事件的this

function func(x, y, ev) {
    console.log(this, x, y, ev);
}
const obj = {
    name: "test"
};
document.body.onclick = func; //=>this:body  x:MouseEvent  y:undefined
document.body.onclick = func.call(obj, 10, 20);

这样处理不行，事件绑定，绑定的是一个方法，此处是先把func执行（做了一些处理），把方法执行的返回结果赋值给事件绑定

解决方法：包一层匿名函数先执行call

document.body.onclick = function anonymous(ev) {
    func.call(obj, 10, 20, ev);
};

和直接用bind是一样的效果

document.body.onclick = func.bind(obj, 10, 20);

手写bind

  • 利用科里化函数的编程思想，预先把需要处理的函数/改变的this以及传递的实参等信息存在闭包中，后期满足条件（事件触发/定时器等）,先执行返回的匿名函数，在执行匿名函数的过程中再去改变this等
function func(x, y, ev) {
    console.log(this, x, y, ev);
}
const obj = {
    name: "test"
};

Function.prototype.bind = function bind(context, ...params) {
    // this -> 处理的函数  func
    // context -> 要改变的函数中的THIS指向  obj
    // params -> 最后给函数传递的实参  [10,20]
    // 保存func，便于匿名函数中执行，也可以使用箭头函数，就不需要保存this了
    let _this = this;
    // 返回一个匿名函数
    return function /* anonymous */(...args) {
        // args -> 可能传递的事件对象等信息  [MouseEvent]
        // this -> 匿名函数中的THIS是由当初绑定的位置触发决定的（总之不是func要处理的函数），所以需要保存_this
        _this.call(context, ...params.concat(args))
    }
}
document.body.onclick = func.bind(obj, 10, 20)

apply

apply应用：获取数组中的最大值

使用排序

   console.log(arr.sort((a, b) => b - a)[0])

利用Math.max
Math.max 需要一项项传入数值进行比较

    let arr = [4, 6, 10, 3, 5];
 
    console.log(Math.max.apply(Math, arr))

例题

1

var num = 10;
var obj = {
    num: 20
};
obj.fn = (function (num) {
    this.num = num * 3;
    num++;
    return function (n) {
        this.num += n;
        num++;
        console.log(num);
    }
})(obj.num);
var fn = obj.fn;
fn(5);
obj.fn(10);
console.log(num, obj.num);

2

以下代码的this是什么

button.onclick = function(e) {
  console.log(this)
}

回答：不知道
因为this是call的第一个参数，这里并未执行这个事件，所以未传入this
标准回答：

  1. 这个this是不确定的，需要看它如何调用

  2. 如果点击的是button的时候，浏览器会将button作为this传进来

  3. 如果通过其它方式调用就要看传入的this是什么了

    let button = document.createElement('button');
button.innerHTML = "button";
document.querySelector('body').appendChild(button);
button.onclick = function(e) {	// 点击指向button
  console.log(this)
}

let fn = button.onclick;
fn();	// 不传this自调用默认指向window
fn.call({name: "LC"})	// 自调用传入指定this

    在这里插入图片描述

3

注意点

  1. 用let声明的变量不会挂在window上
  2. 判断this时可以用call来尝试改写调用函数
let length = 10
function fn(){console.log(this.length)}

let obj = {
  length: 5,
  method(fn){
    fn()
    arguments[0]() 
  }
} 
obj.method(fn, 1)

在这里插入图片描述

调用的第一个fn()的this就是指向window，window.length

let obj = {
  length: 5,
  method(fn){
    fn.call(window)
  }
}

第二个调用中this指向的是arguments，输出arguments的长度

arguments[0].call(arguments) 

 let length = 10
function fn(){console.log(this.length)}

let obj = {
  length: 5,
  method(fn){
    arguments[0].call(arguments) // 4
  }
} 
obj.method(fn, 1, 2, 3)
斜光
关注
专栏目录
JS面向对象之this
HGYYR的博客
10-15 220
JS面向对象之this。
JS面向对象之this详解（持续更新）
缚己
11-01 272
前言 this 是 JavaScript 中较为复杂的机制之一，this 被隐式定义在所有函数的作用域中，也就是说函数在调用时自动传入一个 this。 有经验的 JavaScript 开发者或许也很难说懂 this 到底指向哪里。 由于博主还是一个学生，无开发经验，所以本文只是博主自己的理解，参考了《你不知道的JavaScript》一书，有不足之处恳请大佬不吝赐教。 通过一段代码来了解 this 的逼格有多高： function getName() { return this.name; } fun
js面向对象 —— this
mocoll的博客
08-23 153
二、this 2.1、函数内this的指向 这些this的指向,是当我们调用函数的时候确定的。调用方式的不同决定 了this的指向不同一般指向我们的调用者。 2.2、改变函数内部this指向 JavaScript为我们专]提供了一些函数方法来帮我们更优雅的处理函数内部 this的指向问题,常用的有bind()、call()、apply() 三种方法。 1. call()方法 call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的this指向。 2、apply()方法 apply()
【JavaScript】环境对象 `this` 详解
最新发布
lph159的博客
09-11 1030
thisthis是 JavaScript 中的关键字，它通常用来引用当前执行上下文中的对象。其值在代码运行时根据函数的调用方式动态绑定。因此，this不仅在普通函数中有特殊意义，在类、对象、事件回调等多种场景中都有不同的表现。this是 JavaScript 中的一个复杂但非常重要的概念。理解它的行为可以帮助你编写更健壮的代码。在不同的上下文中，this的表现各异——全局环境、对象方法、构造函数、箭头函数都有不同的规则。通过掌握callapply和bind，你可以灵活控制this。
JS面向对象中this关键字
weixin_46156304的博客
11-01 643
this关键字 this是什么 this关键字是JavaScript中最复杂的机制之一。它是一个很特殊的关键字，被自动定义在所有函数的作用域中。但是即使是非常有经验的JavaScript开发者也很难说清它到底指向什么。 实际上，JavaScript中this的机制并没有那么先进，但是开发者往往会把理解过程复杂化。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。 this都有一个共同点，它总是返回一个对象。简单说，this就是属性或方法“当前”所在的对象。 为什么使用this this提供了一种更优雅
js面向对象之this指向
qq_23141881的博客
07-21 899
初步了解this这个磨人的小妖精
【JavaWeb】一文Servlet全解：继承关系、生命周期、容器和请求转发与重定向等
m0_67392661的博客
03-06 156
文章目录 一、Servlet 概述 二、Servlet HelloWorld 三、Servlet 继承关系 四、Servlet 生命周期 五、ServletConfig 和 ServletContext 六、请求转发与重定向 七、获取请求参数 一、Servlet 概述 1、Servlet名字 Servlet = Server + applet Server：服务器 applet：小程序 Servlet：服务器端的小程序 2、Servlet在Web应用中的作用 ①生活中的例子 ②对应
iText电子书案例全解：打造完美PDF电子书生成系统
[iText电子书案例全解：打造完美PDF电子书生成系统](https://img-blog.csdnimg.cn/2021072800365332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3...
Servlet全解：继承关系、生命周期、容器和请求转发与重定向等
m0_71777195的博客
06-27 194
1、Servlet名字Server：服务器 applet：小程序 Servlet：服务器端的小程序2、Servlet在Web应用中的作用①生活中的例子②对应Web应用③具体细节④Servlet扮演角色 在整个Web应用中，Servlet主要负责处理请求、协调调度功能。我们可以把Servlet称为Web应用中的『控制器』1、HelloWorld分析①目标 在页面上点击超链接，由Servlet处理这个请求，并返回一个响应字符串：Hello,I am Servlet! 。②思路2、具体操作①创建动态Web Mod
「前端进阶」方方-前端体系课阶段二：前端精进（JavaScript 专精）
雨y飘零久的博客
03-29 1701
文章目录手写 Promise 上手写 Promise 下async await 全解 手写 Promise 上 面试答题方法论： 该技术要解决什么问题–why 该技术是怎么解决这个问题的–how 该技术有什么优点（对比其他技术）–pros （优点） 该技术有什么缺点–cons （缺点） 如何解决这些缺点–more Promise 要解决什么问题–why 答：Promise 要解决的就是回调地狱的问题。回调过多导致代码复杂，不清晰。 如下图所示，该代码用 Node.js 实现了调整文件夹中图片的宽高比例
JavaScript 面向对象之 this 关键字详解
wml
10-09 2351
js面向（基于）对象编程——类（原型对象）与对象 this—问题提出 在实际编程中，我们可能有这样的需求，当我们创建一个对象后，就希望该对象自动的拥有某些属性（比如：当我们创建一个Person对象后，就希望该对象自动拥有name和阿哥属性，这又怎么办？） 解决之道：使用this js虚拟机会给每一个对象分配this，代表当前对象。 实例代码： function Person
JS中的this对象
一位不愿意透露姓名的网友博客
05-31 134
在JS中调用函数的模式可以分为4种： 方法调用模式、函数调用模式、构造器调用模式、apply调用模式。 一、方法调用模式 如下： var obj = { name: "123", sayName: function() { console.log(this.name); } }; obj.sayName(); //123 函数作为对象的一个属性，调用时this指向这个对象。 二、函数调用模式 如下： function sayName() { con
3-JS-对象-对象方法，this
qq_44790423的博客
02-23 165
对象方法，“this” let user = { name: "John", age: 30 }; 方法示例： let user = { name: "John", age: 30 }; user.sayHi = function() { alert("Hello!"); }; user.sayHi(); // Hello! 使用预先声明的函数作为方法 let user = { // ... }; // 首先，声明函数 function sayHi() { alert(
JS中的this对象详解
许由务光的博客
12-03 356
JS中的this对象详解 借助阮一峰老师的话：它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。这句话看似平常，可是要非常注意三个字：“运行时”，这说明this关键字只与函数的执行环境有关，而与声明环境没有关系。也就是这个this到底代表的是什么对象要等到函数运行时才知道，有点类似函数定义时的参数列表只在函数调用时才传入真正的对象。理解了这一点对后面this关键字规律的掌握有很大帮助。...
js的this对象
Venus_j的博客
08-08 447
四种JS中函数调用方式中this对象的指向问题
【JavaScript 教程】面向对象编程——this 关键字
油墨香^-^的博客
06-13 457
1、涵义 this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。 前一章已经提到，this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象。 简单说，this就是属性或方法“当前”所在的对象。 this.property 上面代码中，this就代表property属性当前所在的对象。 下面是一个实际的例子。 var person = { name:'张三',.
js应用笔记 面向对象、this的用法
夜阑珊妖妖
03-04 125
构造函数： var person = function (name, age) { this.name = name; this.age = age; this.sayHi = function () { console.log("我叫：" + this.name + "我今年：" + this.age); } } var p = new per...
JS面向对象(一)——JS OOP基础与JS 中This指向详解
CaseyWei
01-11 281
前  言 　　学过程序语言的都知道，我们的程序语言进化是从“面向机器”、到“面向过程”、再到“面向对象”一步步的发展而来。类似于汇编语言这样的面向机器的语言，随着时代的发展已经逐渐淘汰；而面向过程的语言也只有C语言老大哥依然坚挺；现在主流的语言(例如Java、C++、PHP等)都是面向对象的语言。 而我们的JavaScript语言，恰恰介于面向过程与面向对象之间，我们称它为“基于对象”的语言。但...
JS面向对象编程（一） 搞懂this的指向！
weixin_43727629的博客
11-18 415
最近在学习JS面向对象思想，总结出来了一些方法和技巧，借此分享给大家！ 先从最麻烦的this开始！ 先定义一个简单函数： function whoAmI() { console.log(this.username); } 将该函数复制成为一个对象的成员方法： var obj = { func:whoAmI, usernam...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值