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

原创 2015年11月18日 23:28:10

  前面把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、objA

var objB = {
    name: "objB"
}
objB.show = a.show
objB.show();//5、objB
(objB.show = a.show)();//6、hello
复制代码

 

这几段代码就把this常见的情况给表现出来的差不多了, thisjs中主要有四种用法:

1、作为普通函数使用

2、作为对象方法来使用

3callapply

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

 

这个在上面的继承中的原型冒充中也提过一些,这里也详细说明thiscallapply中微秒的用法:

复制代码
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  


版权声明:本文为博主原创文章,未经博主允许不得转载。个人独立博客:http://blog.laofu.online/

C++ this 指针的用法及注意

  • 2009年08月05日 22:24
  • 27KB
  • 下载

(1.1.17)编程基础之this指针的用法及介绍

this只能在成员函数中使用 由此可见this在成员函数的开始前构造的在成员的结束后清除 1this指针是什么时候创建的 2this指针存放在何处 堆栈全局变量还是其他 3this指针如何传递给类中函...

C++中this指针用法详解

this指针的用处:   一个对象的this指针并不是对象本身的一部分,不会影响sizeof(对象)的结果。this作用域是在类内部,当在类的非静态成员函数中访问类的非静态成员的时候,编译器会自动将...

c++中this指针的用法小结

1. this指针的用处:   一个对象的this指针并不是对象本身的一部分,不会影响sizeof(对象)的结果。this作用域是在类内部,当在类的非静态成员函数中访问类的非静态成员的时候,编译器会...

C++中this指针的用法详解

this指针是什么时候创建的? this在成员函数的开始执行前构造,在成员的执行结束后清除。 -----------------------------------------------...

C++中this指针的用法详解

转自:http://blog.chinaunix.net/uid-21411227-id-1826942.html 1. this指针的用处:   一个对象的this指针并不是对象本身的一部分,不...
  • CSDNwei
  • CSDNwei
  • 2015年06月09日 14:24
  • 292

C++中this指针的用法详解

1. this指针的用处:   一个对象的this指针并不是对象本身的一部分,不会影响sizeof(对象)的结果。this作用域是在类内部,当在类的非静态成员函数中访问类的非静态成员的时候,编译器会...

c++中this指针的用法详解

为什么引入this指针?     最简单的应用场景就是:当我们在类中定义了一个变量,同时在类成员函数中定义了同一变量时,也就是说变量名重复时,但是我们想使用类中定义的变量,这个时候我们该怎么办呢?这个...

C++ primer 【笔记】C++中this指针的用法详解

本文转自: C++的一大误区——深入解释直接初始化与复制初始化的区别 不久前,在博客上发表了一篇文章——提高程序运行效率的10个简单方法,对于其中最后一点,多使用直接初始化,有很多读者向我提出了疑问,...

C++中this指针的用法及介绍

C++中this指针的用法及介绍 作者: 字体:[增加 减小] 类型:转载 以下是对C++中this指针的用法进行了详细的分析介绍,需要的朋友可以过来参考下 thi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第22篇 js中的this指针的用法
举报原因:
原因补充:

(最多只允许输入30个字)