什么是this

this是js中的一个关键词,它总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。

当函数被调用时,this被添加到作用域中,例如:

function add(num1,num2) {
var sum = num1 + num2;
return sum;
}
var total = add(5,10);

add的作用域链如下图所示,我们可以看到作用域链中的两个this(一个全局作用域中的this和add作用域中的this,后面我们将明白为何两个this都指向window):

this的指向

this总是指向所属函数的拥有者对象,具体分为3种情况

1.作为对象的方法调用:  当函数作为对象的方法被调用时,this指向该对象。

var obj={
a:1,
getA:function(){
alert(this===obj);
alert(this.a);
}
};
obj.getA(); //分别输出ture和1

2.作为普通函数调用:  当函数不作为对象的属性被调用时,也就是我们常说的普通函数方式,此时的this总是指向全局对象。

window.name='jacksplwxy';
var getName=function(){
return this.name;
};
console.log(getName()); //输出jacksplwxy

3.构造器调用:  当用new调用构造函数时,该构造函数会返回一个对象,一般情况下,this就会指向这个返回对象。

var myClass=function(){
this.name='jacksplwxy';
};
var obj=new myClass();
console.log(obj.name); //输出:jacksplwxy

this实战

技巧:this总是指向所属函数的拥有者对象

//实战1:
var obj={
myName:'jacksplwxy',
getName:function(){
return this.myName;
}
};
console.log(obj.getName()); //输出: jacksplwxy var getName2=obj.getName;
console.log(getName2()); //输出:undefined /*解析:
当调用obj.getName时,getName方法作为obj对象的属性被调用的,根据this指向情形1规律,此时this
指向obj对象,所示输出jacksplwxy。
当用另外一个变量getName2来引用obj.getName,并调用getName2时,根据this指向情形2规律,此时是
普通函数调用方式,this是指向全局window的。所以输出undefined。*/
//实战2:
var foo = "window";
var obj = {
foo : "obj",
getFoo : function(){
return function(){
return this.foo;
};
}
};
var f = obj.getFoo();
f(); //window /*解析:
执行var f = obj.getFoo()返回的是一个匿名函数,相当于:
var f = function(){
return this.foo;
}
f()相当于window.f(), 因此f中的this指向的是window对象,this.foo相当于window.foo, 所以f()返回"window"
*/
//实战3:
var foo = "window";
var obj = {
foo : "obj",
getFoo : function(){
var that = this;
return function(){
return that.foo;
};
}
};
var f = obj.getFoo();
f(); //obj /*解析:
执行var f = obj.getFoo() 同样返回匿名函数,即:
var f = function(){
return that.foo;
}
唯一不同的是f中的this变成了that, 要知道that是哪个对象之前,先确定f的作用域链:f->getFoo->window 并在该链条上查找that,此时可以发现that指代的是getFoo中的this, getFoo中的this指向其运行时的调用者,从var f = obj.getFoo() 可知此时this指向的是obj对象,因此that.foo 就相当于obj.foo,所以f()返回"obj"
*/

转载请注明文章出处:http://www.cnblogs.com/jacksplwxy/p/6701874.html

(O)js核心:this的更多相关文章

  1. JS核心

    JS核心 1.实例化对象 objectName = new objectType (param1 [,param2] ...[,paramN]) 参数  objectName 新对象实例的名称. ob ...

  2. Node.js核心入门

    前言: 因为以前学习Node.js并没有真正意义上的去学习它,而是粗略的学习了npm的常用命令和Node.js一些模块化的语法,因此昨天花了一天的时间看了<Node.js开发指南>一书.通 ...

  3. JS核心系列:浅谈原型对象和原型链

    在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...

  4. JS核心系列:浅谈 call apply 与 bind

    在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...

  5. node.js核心模块

    全局对象 global 是全局变量的宿主 全局变量 在最外层定义的 全局对象的属性 隐士定义的变量(未定义直接赋值的变量) 当定义一个全局变量时 这个变量同时也会成为全局对象的属性 反之亦然 注意: ...

  6. JS核心笔记

    一.说明 JS权威指南文字用红色标出: JS高级程序设计用橙色标出; 自己加上的文字用粉红色标出: 其(一)-(九)为JS权指南,(十)为JS高级程序设计 二.记法结构 2.1字符集 Javascri ...

  7. vue.js核心最基本的功能

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: , text: , text: , text: '随便其它什么人吃的东西' } ] }}) 蔬菜 奶酪 随便其 ...

  8. Ext.Js核心函数( 三)

    ExtJs 核心函数简介 1.ExtJs提供的常用函数2.get.fly.getCmp.getDom.getBody.getDoc3.query函数和select函数4.encode函数和decode ...

  9. node.js 核心http模块,起一个服务器,返回一个页面

    let http=require("http"); //引入核心http模块 let fs=require("fs"); let mime={ '.js':'a ...

  10. JS核心之DOM操作 下

    目录: 1.节点类型之Document类型 2.节点类型之Element类型 3.节点类型之Text类型 4.综合小示例 -- 动态添加外部样式文件 5.查找元素的扩展方法 接上篇,我们先来看常用的三 ...

随机推荐

  1. SSH 登录时出现如下错误:Disconnected:No supported authentication methods available

    SSH 登录时出现如下错误:Disconnected:No supported authentication methods available 更新时间:2017-06-07 13:26:11   ...

  2. redis分布式锁Redisson扩展

    如果大家项目中Redis是多机部署的可以来好好看看这篇实现,讲的非常好. 使用Redisson实现分布式锁,Spring AOP简化之   源码 Redisson概述 Redisson是一个在Redi ...

  3. bootstrap 参考文档

    https://getbootstrap.com/docs/3.3/css/#sass-installation

  4. spring boot 微服务例子一

    package com.example.hello.demo; import org.springframework.boot.SpringApplication;import org.springf ...

  5. day18 logging模块 sys shelve

    昨日回顾 re 正则表达式 匹配字符串 场景 例如:爬虫,密码规则验证,邮箱地址验证,手机号码 学习re主要学习的就是 那一堆特殊符号 hashlib hash是一种算法 lib表示库 该模块包含了一 ...

  6. python3获得命令行输入的参数

    外部直接执行python文件时,我们有时需要获得命令行的参数   获得命令行参数的两种方式   1.通过sys.argv sys.argv:获得一个参数列表,第一个值为文件名本身,通过sys.argv ...

  7. IDEA中配置Maven+spring MVC+tomcat

    一:配置Maven安装教程如下: http://blog.csdn.net/qq_32588349/article/details/51461182 实际安装过程中,如果按照教程配置如下属性,最后创建 ...

  8. FileInputStream.FileOutputStream执行图片复制

    /** * 需求:拷贝一个图片 * 思路: * 1.创建一个字符输入流和图片相关联. * 2.用字节写入流对创建图片文件,用于存储到图片数据. * 3.通过循环续写,完成数据的存储. * 4.关闭资源 ...

  9. cdh 5.13 centos6.9安装

    1.所有节点准备工作 1).关闭防火墙 2).关闭selinux 并重启系统 3).建立NTP服务器,所有数据节点每天定时同步时间. 主节点在ntp.conf中增加 restrict 192.168. ...

  10. 重建二叉树(python)

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...