第22篇 js中的this指针的用法
前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定。
首先看下面代码:
function funcA() {this.name = "hello";console.log(this.name);this.show = function() {console.log(this.name);} } funcA();// 1、hello var a = new funcA();//2、hello a.show();//3、hello var objA = {name: "objA" } a.show.call(objA);//4、objAvar objB = {name: "objB" } objB.show = a.show objB.show();//5、objB (objB.show = a.show)();//6、hello
这几段代码就把this常见的情况给表现出来的差不多了, this在js中主要有四种用法:
1、作为普通函数使用
2、作为对象方法来使用
3、call和apply
4、作为构造函数来使用
下面分别说明
1、作为普通函数来使用:
function funcA() {this.name = "hello";console.log(this.name);this.show = function() {console.log(this.name);} } funcA();// 1、hello
这个代码很简单,但也隐藏了一个坑,就是这个时候的this 代表的是window的指针,所以当这段代码运行完之后,你再输出 console.log(window.name)时候,你会发现输出为”hello”,在使用中尽量避免。
2、作为对象方法来使用
var obj={name:"hello",show:function(){
console.log(this.name);
}};
obj.show();
这个很简单,this指向自己,所以this.name就用hello;
如果代码修改下:
var obj={name:"hello",show:function(){console.log(this.name); }}; obj.show();var objA={name:"world"} objA.show=obj.show; objA.show()
这个结果又是什么呢?答案是”world”,因为在js中对象都是引用类型,当objA.show=obj.show这句代码把objA.show也指向的show方法,所以在调用的时候会把this,指向objA而不是obj.
3、call和apply
这个在上面的继承中的原型冒充中也提过一些,这里也详细说明this在call和apply中微秒的用法:
function funcA() {this.name = "hello";console.log(this.name);this.show = function() {console.log(this.name);} }var a = new funcA(); a.show(); var objA = {name: "objA" } a.show.call(objA);
上面这段代码就是call的用法,这里我们可以把代码拆解成我们能看的懂的形式:
a.show.call(objA)====>{ obj.show=a.show(); obj.show(); delete obj.show(); }
上面就是call的类似执行的过程的形势(实际上并不是这样的,可以这样来记),知道了这个执行过程,我们就来探究这个的执行过程:
1、把a.show里面的方法中的this全部换成obj.
2、执行a.show(),同时把后面的参数作为参数处理。
4、作为构造函数来使用
function funcA(name){this.name;this.show=function(){console.log(name);} } var a=new funcA("hello"); a.show();
作为构造函数使用的时候,在new的关键字创建对象的时候,会先生成一个空对象,然后调用方法,把this的替换成这个空对象。(这个在上篇有详细的说明,这里不多说)。在创建对象的时候,this指针就指向了创建新对象。
所以上面的那段代码我想应该就能看懂为什么会是这个输出结果了,唯一的有一个(objB.show = a.show)();这个比较奇怪,因为赋值的时候,返回的是右边的那个函数,所以最终执行的也是a.show();
总结:js中的this其实是一个比较简单的东西,上面只列出了常用的东西,至于更深入的,可以自己在深入挖掘下,相信有了这个基础后,再深入的话应试就不是一件枯燥的事了
下篇说下可以快速学习js的方面的知识。
写于 2015.11.17
转载于:https://www.cnblogs.com/OceanHeaven/p/4973204.html
第22篇 js中的this指针的用法相关推荐
- js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
- MySQL数据库,从入门到精通:第四篇——MySQL中常用的运算符及其用法
MySQl学习(MySQL数据库,从入门到精通:第四篇--MySQL中常用的运算符及其用法 第四篇_MySQL中常用的运算符及其用法运算符 1. 算术运算符 1.加法与减法运算符 2.乘法与除法运算符 ...
- js中!和!!的区别及用法
js中!和!!的区别及用法 js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值, 1.!可将变量转换成boolean类型,null.undefined和 ...
- js中try和catch的用法
js中try和catch的用法 版权声明:本文为@lyhh5原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明 原文链接:https://blog.csdn.net/l ...
- JS中break和continue的用法
break和continue的用法 Break--跳出循环.判断,用于判断或循环语句中 Continue--跳出本次循环,只能用于循环语句中. 区分是否为自定义标识符,其后加冒号,为自定义标识符. B ...
- js 浅拷贝直接赋值_第二十二篇 JS中浅拷贝的方法有哪些?
重要:什么是拷贝?之前也写过类似的文章,大家可以看<理解js的深拷贝和浅拷贝原理和实现的方法> 首先来直观的感受一下什么是拷贝. let arr = [1, 2, 3]; let newA ...
- js中的this指针(二)
在 js 中声明并定义一个函数后,除了定义时传入的形式参数,函数还会接收到 2 个附加的参数:this 和 arguments. this 指针的值取决于调用时的模式. 当这个函数被保存为对象的一个属 ...
- 第28篇 js中let和var
let与var 在js中声明一个变量除了一个var 还有一个let的声明.对于var 在前面的作用域中已经讲过,这次主要说下二者的区别: 在MDN上有这样的一个demo: var list = d ...
- php document.write,在JS中有关document.write()的用法(详细教程)
这篇文章主要介绍了JS 中document.write()的用法和清空的原因浅析,需要的朋友可以参考下 可能很多朋友都遇到过这样的情况,那就是使用document.write()函数向网页中写内容的时 ...
最新文章
- 业界丨全球AI人才只有2万多,但仅3000人在求职
- 如何使用 python 减少 kaggle Mushroom Classification 数据集中的特性数量?
- 剖析Picasso加载压缩本地图片流程(解决Android 5.0部分机型无法加载本地图片的问题)
- AAAI2019 | 腾讯AI Lab详解自然语言处理领域三大研究方向及入选论文
- Hadoop开发工具简介
- css复合选择器 1205
- maptool_如何使用MapTool构建交互式地牢RPG
- 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。
- vscode 字体太小的问题,安装新字体
- 趣味计算机课堂示范课,枯燥的理工学科,秒变趣味课堂
- 计算机操作系统(第四版)课后习题答案(完整版)---汤小丹 梁红兵 哲凤屏 汤子瀛 版本
- 量子计算黑客松大赛-量子计算编程
- WSL2 安装 CUDA(Win11)
- 【案例教程】基于RWEQ模型的土壤风蚀模数估算及其变化归因分析实践技术
- 【论文】联邦学习区块链 论文集(三)
- 【Echarts】渐变色桑基图
- 从零开始的MySQL教程——上
- Android开源项目 资源 学习
- RustDesk 自建服务器,局域网可以连接服务器,外网就不可以了。 求高手指点迷津。
- 2022年 安全智能分析技术白皮书 模型开发
热门文章
- PHP在线SEO文章伪原创同义词交换工具源码
- 沉梦云商城系统2.1.7免授权源码+搭建教程
- WordPress RiPro极简蓝色调炮子子主题
- emlogPHP媒体范网站主题模版 美化版v6.3.1
- Magento教程 3:如何在Magento社群版(Community Edition)安装范例资料?
- jquery 键盘事件
- 人工智障学习笔记——梯度下降(1)基础变种
- 关于udelay(); mdelay(); ndelay(); msleep();
- nginx优缺点 优化
- 【AI视野·今日NLP 自然语言处理论文速览 第二十二期】Mon, 27 Sep 2021