首先看下面代码:

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、objA var 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.

3callapply

这个在上面的继承中的原型冒充中也提过一些,这里也详细说明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的方面的知识。

js中的this指针的用法的更多相关文章

  1. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

  2. js中substring和substr的用法

    js中substring和substr的用法 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数    ...

  3. js中继承的几种用法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="BACKGROUND-COLOR: #ffffff">& ...

  4. 区别和详解:js中call()和apply()的用法

    1.关于call()和apply()的疑点: apply和call的区别在哪里 什么情况下用apply,什么情况下用call apply的其他巧妙用法(一般在什么情况下可以使用apply) 2.语法和 ...

  5. js中的this指针(二)

    在 js 中声明并定义一个函数后,除了定义时传入的形式参数,函数还会接收到 2 个附加的参数:this 和 arguments. this 指针的值取决于调用时的模式. 当这个函数被保存为对象的一个属 ...

  6. js中innerHTML与innerText的用法与区别

    用法: <div id="test">    <span style="color:red">test1</span> te ...

  7. JS中call、apply的用法说明

    JS Call()与Apply()的区别 ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是 ...

  8. js中!和!!的区别及用法

    js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值,1.!可将变量转换成boolean类型,null.undefined和空字符串取反都为false,其 ...

  9. js中的||、&&与!用法

    &&和||在JQuery源代码内尤为使用广泛,由网上找了些例子作为参考,对其用法研究了一下: 1. && function a(){ alert("a&quo ...

随机推荐

  1. K:leetcode 5381.查询带键的排列 这题简单,但我还能优化。精益求精,才是算法的乐趣所在!

    前言: 本题来自leetcode第184场周赛的第二小题.以前参加过周赛,觉得很有趣.苦于最近一段时间比较忙就没坚持参加了(实际上是借口来着....),由于昨晚思考一些事情,导致睡不着,所以起得有点早 ...

  2. Scratch 第2课淘气男孩儿

    素材及视频下载 链接:https://pan.baidu.com/s/1qX0T2B_zczcLaCCpiRrsnA提取码:xfp8

  3. ERC20代币(ETH)空投工具-创建代币

    代币空投工具地址:http://tool.ethhelp.cn 适用币种: ETH和ERC20代币 使用建议: ERC代币空投,直投,ETH批量转小号 优势介绍: 1.可节省30%手续费 2.转几千地 ...

  4. 关于Cookie的相关知识点以及使用方法

    首先介绍cookie的一些方法 response.addCookie(Cookie cookie)是将一个cookie对象传入客户端. Cookie cookie=new Cookie(String ...

  5. javascript入门 之 Ajax(一)

    1.在项目的根目录下创建data目录,data目录下创建info文件,编写info文件如下代码: <h1>all data<h2> <p>this is the d ...

  6. easy-mock 本地部署(挤需体验三番钟,里造会干我一样,爱象节款mock)

    前言 很多小伙伴问我怎么在自己公司的项目里面添加配置mock,在vue项目里面都知道怎么配置mock,在大型前端项目里面就一脸疑惑了. 我就回答他,你今天会在vue项目里面用,那天换公司是用angul ...

  7. "图片组件"组件:<pic> —— 快应用组件库H-UI

     <import name="pic" src="../Common/ui/h-ui/media/c_pic"></import> & ...

  8. Python设计模式(3)-工厂方法模式

    # coding=utf-8 #定义一个用于创建对象的接口,让子类决定实例化哪一个类 class DbManager: def __init__(self): pass def operate_db( ...

  9. tf.train.GradientDescentOptimizer 优化器

    tf.train.GradientDescentOptimizer(learning_rate, use_locking=False,name='GradientDescent') 参数: learn ...

  10. 数字电路技术之触发器(基本RS触发器)

    一.触发器的知识 1.触发器是构成时序逻辑电路的基本逻辑部件. 2.[1]它有两个稳定的状态:0状态和1状态:      [2]在不同的输入情况下,它可以被置成0状态或1状态:      [3]当输入 ...