JavaScript this使用方法图解

这篇文章主要介绍了JavaScript this使用方法图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

本文我们介绍下js中this的用法。

由上图可得，默认this指向window，而在node.js中this默认指向global。

由上图可得：

1.原型链为o->MyClass.prototype。

2.函数如果没有明确返回值默认返回this。

由上图可得：call和apply功能相同，不同之处为apply传调用参数时应为数组。

由上图可得：bind传的对象即作为this。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript中的this作用域详解

    Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉得混乱,它不是固定不变的,而是随着它的执行环境的改变而改变. 在Javascript中this总是指向调用它所在方法的对象.因为this是在函数运行时,自动生成的一个内部对象,只能在函数内部使用. 下面我们分几种情况深入分析this的用法: 1.全局的函数调用 function globalTest() { this.name = "glob

  • 浅谈JS中几种轻松处理'this'指向方式

    我喜欢在JS中更改函数执行上下文的指向,也称为 this 指向. 例如,咱们可以在类数组对象上使用数组方法: const reduce = Array.prototype.reduce; function sumArgs() { return reduce.call(arguments, (sum, value) => { return sum += value; }); } sumArgs(1, 2, 3); // => 6 另一方面,this 很难把握. 咱们经常会发现自己用的 this

  • JavaScript箭头函数中的this详解

    前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log("Hello, Fundebug!"); } 箭头函数指的是用=>定义的函数: var hello = () => { console.log("Hello, Fundebug!"); } JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不

  • JavaScript This指向问题详解

    JavaScript This指向问题详解

    这篇文章主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别.在绝大多数情况下,

  • 深入学习js函数的隐式参数 arguments 和 this

    前言 在函数调用时,arguments和this会被静默的传递给函数,并可以在函数体内引用它们,借以访问函数相关的一些信息. 其中arguments是一个类数组结构,它保存了调用时传递给函数的所有实参:this是函数执行时的上下文对象, 这个对象有些让人感到困惑的行为. 下面分别对他们进行讨论. 1. arguments 1.1 背景 JavaScript 允许函数在调用时传入的实参个数和函数定义时的形参个数不一致, 比如函数在定义时声明了 n 个参数, 在调用函数时不一定非要传入 n 个参数,

  • javascript的this关键字详解

    this 的定义 表示当前执行代码的环境对象 因此可将 this 的剖析分为"全局环境" 和 "函数环境" 两种类型的环境对象 全局环境 console.log(this === window); // true var a = 10; console.log(this.a); // 10 函数环境 在函数内部,this 的取值取决于函数被调用时的运行环境. 这里涉及到内存里的数据结构相关的知识点,当我们定义以下字面量对象时会发生一系列的关联关系 var obj =

  • JavaScript基础之this和箭头函数详析

    箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this. 由于箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),他们的第一个参数会被忽略. 前言 阅读下面的内容要先看下<你不知道的javascript(上)>中的第二部分:this和对象原型(里面对于this指向的理论部分主要来源于该书). 问题 这周在写代码的时候,听同事在说箭头函数无法更改this的指向,并且使用下面代码进行验证: // (1)

  • JavaScript this在函数中的指向及实例详解

    JavaScript this在函数中的指向及实例详解

    一.this,其实可以类比成人 说到this的话,我们在js中主要研究的都是函数中的this,在javascript中,this代表当前行为的执行主体,而context代表的是当前行为执行的的环境(区域). 例如男神在北理珠吃饭,这句话分别代表的含义如下 男神 -->> 主体(this) 吃饭 -->> 函数(function) 北理珠 -->> 环境(context) -->>说明:吃饭是函数,男神是函数的主体,北理珠就是当前行为的执行环境(context

  • vue项目中在外部js文件中直接调用vue实例的方法比如说this

    一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app

  • JavaScript this使用方法图解

    这篇文章主要介绍了JavaScript this使用方法图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 本文我们介绍下js中this的用法. 由上图可得,默认this指向window,而在node.js中this默认指向global. 由上图可得: 1.原型链为o->MyClass.prototype. 2.函数如果没有明确返回值默认返回this. 由上图可得:call和apply功能相同,不同之处为apply传调用参数时应为数组. 由上图

  • 关于SQL Server 2008忘记sa密码修改sa密码的方法图解

    关于SQL Server 2008忘记sa密码修改sa密码的方法图解

    1. 先用Window身份验证方式登陆进去,选择数据库实例,右键选择属性--安全性:把服务器身份验证选项从"Window身份验证模式"改为"SQLServer和Window身份验证模式".点击确定,关闭当前对象资源管理器.   2. 重 新用Window验证方式登陆,在左边的树结构中选择"数据库"下面的"安全性"选项--登录名--sa,右键属性--在"SQLServer身份验证"中输入要设置的sa密码. 3

  • 使用PL/SQL Developer连接Oracle数据库的方法图解

    使用PL/SQL Developer连接Oracle数据库的方法图解

    之前因为项目的原因需要使用Oracle数据库,由于时间有限没办法从基础开始学习,而且oracle操作的命令界面又太不友好,于是就找到了PL/SQL Developer这个很好用的软件来间接使用数据库. 下面简单介绍一下如何用这个软件连接Oracle数据库. 第一步 安装Oracle Database和PL/SQL Developer 这一步网上有很多的教程就不详细介绍.Oracle可以直接到官网去下载,在安装中注意几个问题就行: 1.一定要记住自己全局数据库名字和口令,这个在后面连接的时候很重要

  • JavaScript Math.ceil 方法(对数值向上取整)

    JavaScript Math.ceil 方法 Math.ceil 方法用于对数值向上取整,即得到大于或等于该数值的最小整数.语法如下: Math.ceil(x) 参数说明: 参数 说明 x 必需.必须是一个数值. 提示:该方法与 Math.floor 方法正好相反. Math.ceil 方法实例 <script language="JavaScript"> document.write( Math.ceil(0.35) + "<br />"

  • JavaScript Math.floor方法(对数值向下取整)

    JavaScript Math.floor 方法 Math.floor 方法用于对数值向下取整,即得到小于或等于该数值的最大整数.语法如下: Math.floor(x) 参数说明: 参数 说明 x 必需.必须是一个数值. 提示:该方法与 Math.ceil 方法正好相反. Math.floor 方法实例 <script language="JavaScript"> document.write( Math.floor(0.35) + "<br />&q

  • JavaScript中用sort()方法对数组元素进行排序的操作

    JavaScript数组sort()方法排序数组的元素. 语法 array.sort( compareFunction ); 下面是参数的详细信息: compareFunction : 指定一个函数,定义排序次序.如果省略,数组字典顺序排序. 返回值: 返回一个排序的数组 例子: <html> <head> <title>JavaScript Array sort Method</title> </head> <body> <s

  • 详解JavaScript中setSeconds()方法的使用

    javascript Date.setSeconds()方法按照本地时间的设置秒指定日期. 语法 Date.setSeconds(secondsValue[, msValue]) 注:括号内外的数据是可选的 下面是参数的详细信息: secondsValue : 0到59之间的整数. msValue : 一个数字在0和999之间,表示毫秒. 如果不指定msValue参数,使用从方法使用getMilliseconds返回的值.如果指定的参数是预期范围之外,调用setSeconds尝试相应地更新Dat

  • 详解JavaScript中getFullYear()方法的使用

    javascript Date.getFullYear()方法按照本地时间返回指定日期的年份.通过getFullYear返回的值是一个绝对的数字.对于1000年和9999之间的日期,getFullYear返回一个4位数字,例如2008年. 语法 Date.getFullYear() 下面是参数的详细信息: NA 返回值: 按照本地时间返回指定日期的年份. 例子: <html> <head> <title>JavaScript getFullYear Method<

  • JavaScript中removeChild 方法开发示例代码

    1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

  • MyBatis_Generator插件的安装以及简单使用方法(图解)

    MyBatis_Generator插件的安装以及简单使用方法(图解)

    MyBatis_Generator_1.3.1.zip 1 下载安装包 安装包名称:MyBatis_Generator_1.3.1.zip 2 在Eclipse上进行安装 l 将插件压缩包中的features和plugins里的东西都拷贝到eclipse的文件夹features和plugins下. l 重启eclipse,验证是否安装成功. 出现此说明安装成功! 3 使用指南 创建Maven工程,完成之后如下: 1.新建一个generatorConfig文件 2.generatorConfig.

随机推荐