js中的this指针的用法
首先看下面代码:
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.
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的方面的知识。
最新文章
- IBatis存储过程返回值
- Python多线程、进程入门1
- 白话学习MVC(十)View的呈现二
- Ecshop文章列表页显示内容摘要
- 简单好用的日志管理工具 Logrotate
- 29.DDR2问题1仿真模型文件
- 现代程序设计homework-02
- FormsAuthentication.GetRedirectUrl 方法
- C# - 使用ConfigurationManager保存数据到App.config
- Python初识 - day5
- 利用cocos2d-x实现CandyCrushSaga消除功能
- 使用docker试用各种软件及docker-ES设置
- 【Spring】7、拦截器HandlerInterceptor
- JRE、JDK概述
- 【C++】operator new/new operator/placement new之间的区别
- Vue(三):vuex是什么
- Linux查看服务器公网ip的方法
- IOS-项目中常见文件介绍
- centos 7防火情配置
- 深入理解jQuery插件开发总结(二)
热门文章
- jenkins 脱机下 安装插件失败
- const不同位置带来的区别
- mysql物理级别热备脚本
- MTK Android Android数据保存到系统数据库
- 路由与交换,cisco路由器配置,动态路由协议—RIP
- Java第五天,API常用类,静态(static)、集合(ArrayList)、日期(Date)、日历(Calendar)的使用方法
- iOS岗位招聘标准水涨船高,五年iOS程序员表示面试太难了
- Python安装MySQL数据库模块
- 【Java】用IDEA搭建源码阅读环境
- Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(二)之Introduction to Objects