js基本操作-this理解

js基本操作-this理解


写在前面

在面向对象的语言中,this关键字的含义是明确且具体的,即指代当前对象。一般在编译期确定下来,或称为编译期绑定。而在 JavaScript中,this是动态绑定,或称为运行期绑定的,这就导致JavaScript中的this关键字有能力具备多重含义,带来灵活性的同时,也为初学者带来不少困惑。

当然,还是老话,所有的方法都来自网上,学到了才是自己的!!

然后,写在前面,带上我们可爱的小伙伴。废话不多说,下面我们开始看起吧!
小伙伴

基本介绍

文章主要是对js的this进行简单的说明和介绍,顺带会添加一些代码,没办法,语言能力有限,说明不了的只能直接上代码了。

关于JS中的this,这是很多前端面试必考的题目,有时候在网上看到这些题目,看着感觉还不错,做起来非常的酸爽!而在实际的开发中,也会遇到各种使用this的问题。当然,在刚开始的时候,我们可能会非常的困惑,这个地方,为什么要这样使用this尼?有时候不明白为什么不直接使用this,而要把this作为参数传入。

下面,我将以我的理解的方式对this的理解和使用,做一个简单的介绍。

this的理解

接单的理解:this指的是引用它的对象。

当然,也可以套用轮子哥的一个解释:

this在js的函数里面只是一个参数,是通过Fuck.Shit(Bitches)这种语法来传递的,点号前面的表达式就算this。不要想太多。

一般来说,阐述JavaScript中this的运作机制,下面一句话诠释的非常贴切。

When a function of an object was called, the object will be passed into the execution context as this value

简而言之,就是function的this永远指向调用它的对象。而鉴于JS所谓的“万物皆对象”,这个this因此可以是任何物件,比如Global对象

JavaScript有一套完全不同于其它语言的对this的处理机制。 下面,将会在不同的情况下,this指向的各不相同。

1.全局范围内

当在全部范围内使用 this,它将会指向全局对象。

this;
console.log(this);//输出window

浏览器中运行的 JavaScript 脚本,这个全局对象是 window。

2.函数调用

这里this也会指向全局对象。

function foo(){
    console.log(this);
}
foo();//输出window

3.方法调用

这个例子中,this 指向调用方法的对象。

var test = {
    foo : function(){
        console.log(this);
    }
}
test.foo();//输出test对象

4.调用构造函数

如果函数倾向于和 new 关键词一块使用,则我们称这个函数是 构造函数。 在函数内部,this 指向新创建的对象。

function foo(name,age){
    this.name = name;
    this.age = age;
    console.log(this);
}
new foo('yu',23);//输出新创建的对象 foo {name: "yu", age: 23}

5.显式的设置

当使用Function.prototype上的call或者apply方法时,函数内的this将会被显式设置为函数调用的第一个参数。

因此函数调用的规则在上例中已经不适用了,在foo 函数内 this 被设置成了 bar。

function foo(a, b, c) {
    this.a = a;
    this.b = b;
    this.c = c;
}

var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将会被扩展,bar被修改为Object {a: 1, b: 2, c: 3}
foo.call(bar, 4, 4, 4); // 传递到foo的参数是:a = 4, b = 4, c = 4; bar被修改为Object {a: 4, b: 4, c: 4}

这里使用了apply和call方法,用于修改this指针的指向。会在后面的文章中详细说明。

使用用例

题目描述:
实现函数 callIt,调用之后满足如下条件
1、返回的结果为调用 fn 之后的结果
2、fn 的调用参数为 callIt 的第一个参数之后的全部参数

输入例子:

var a = 1; 
var b = 2; 
var test = function (first, second) { 
    return first === a && second === b;
}; 
callIt(test, a, b);

输出例子: true

代码实现

//方法一
function callIt(fn) {
    var arr = [].slice.call(arguments,1);
    return fn.call(null, arr[0], arr[1]);//因为只有两个参数,这里直接使用两个了
    // 
}
//方法二
function callIt(fn) {
    //Array.prototype.slice.call的作用是将arguments伪对象转换成数组对象。
    //下面的目的是,将arguments转化为数组后,截取第一个元素之后的所有元素
    return fn.apply(this,[].slice.call(arguments,1));//这里用[]代替Array.prototype,也可以使用下面的。
    //return fn.apply(this,Array.prototype.slice.call(arguments,1));
}

代码说明:

  • 首先,arguments不是真正的数组,不能直接使用slice方法,所以才会用Array对象原型链上面的slice方法去处理arguments,返回的自然是一个数组。

  • 另外,给apply/call传递null,“”空字符串,默认都是this


其他说明

  • 以上的所有方法,都来自网上。

  • 所有的方法,都必须脚踏实地,在具体应用场景下去分析、去选择,我们应该按照具体的情况,来选择方法。

  • 因为浏览器的多样性,前端的应用场景经常很复杂,性能优化充满挑战,也充满机遇。

  • 学会了才是自己的,知道会用会写,才是我们最终的目标。

参考文档


fania
自己的学习分享,
63 声望
3 粉丝
0 条评论
推荐阅读
编码规范-html.md
写在前面 对于不同的编程语言来说,具体的编码规范各不相同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性、可维护性。 本文大部分内容来自网上,仅供个人参考学习! 网络上的知识...

fania4阅读 2.6k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

63 声望
3 粉丝
宣传栏