博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【js】《JavaScript设计模式与开发实践》——this的指向
阅读量:5912 次
发布时间:2019-06-19

本文共 1896 字,大约阅读时间需要 6 分钟。

在js中,this总是指向一个对象,具体要看那个对象在运行时函数的执行环境(动态绑定),即“函数在谁那被调用,this就指向谁”。

1、在对象的方法内调用——指向该对象

例如

var obj = {    name: '小阔爱',    getName: function () {        console.log('this === obj?', this === obj);        console.log('this.name=', this.name);    }};obj.getName(); // '小阔爱'

2、在普通方法内调用——指向全局对象window

例如

window.name = '小阔爱';var getName = function () {    return this.name;};console.log('getName=', getName()); // 小阔爱

或者

window.name = '小阔爱';var obj = {    name: '宝批龙',    getName: function () {        return this.name;    }};var getName = obj.getName;console.log('getName=', getName()); // 小阔爱

或者——当函数里面嵌套函数时,指向window

window.id = 'xiaokuoai';document.getElementById('baopilong').onclick = function () {    console.log('this.id=', this.id); // 'baopilong'    var newFun = function () {        console.log('this.id=', this.id); // 'xiaokuoai'    }    newFun();};

注意:在ES5的strict模式下,普通函数内的this被规定为不会指向window,而是undefined

例如

function func () {    'user strict'    console.log('this=', this); // undefined}func()

3、构造器调用(被new运算符调用)

当函数被new运算符调用时,该函数总会返回一个对象。

例如(一般情况)

var obj = function () {    this.name = '小阔爱';};var newObj = new obj();console.log('newObj.name=', newObj.name); // '小阔爱'

特殊情况:(函数有返回值的情况)

如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。(区分构造器是否显式地返回一个object类型的对象)

例如(不显式返回object对象)

var obj = function () {    this.name = '小阔爱';    return '宝批龙';};var newObj = new obj();console.log('newObj.name=', newObj.name); // '小阔爱'

以及(显式返回object对象)

var obj = function () {    this.name = '小阔爱';    return {        name: '宝批龙'    };};var newObj = new obj();console.log('newObj.name=', newObj.name); // '宝批龙'

4、call或apply调用

跟普通函数相比,这种方式可以动态改变传入函数的this

例如

var obj1 = {    name: '小阔爱',    getName: function () {        return this.name;    }};var obj2 = {    name: '宝批龙'};console.log('obj1.getName=', obj1.getName()); // '小阔爱'console.log('obj1.getName.call(obj2)=', obj1.getName.call(obj2)); // '宝批龙'

转载地址:http://ptmpx.baihongyu.com/

你可能感兴趣的文章
JSP
查看>>
新工作
查看>>
linux网络编程涉及的函数
查看>>
数据表的相关操作
查看>>
SQL 存储过程返回值
查看>>
卷积核与特征提取
查看>>
共轭分布
查看>>
SoapUI Pro Project Solution Collection-DataSource(jdbc,excel)
查看>>
maven及阿里云镜像
查看>>
ssh项目将搜索条件进行联动
查看>>
[CF494C]Helping People
查看>>
POJ 2594 Treasure Exploration(最小可相交路径覆盖)题解
查看>>
使用Promise链式调用解决多个异步回调的问题
查看>>
Windows2008 R2服务器配置TLS1.2方法
查看>>
制作mac U盘启动
查看>>
Charles中如何对https抓包
查看>>
数据挖掘十大经典算法
查看>>
IPOPT工具解决非线性规划最优化问题使用案例
查看>>
jQuery点击图片弹出放大特效下载
查看>>
同步/异步-阻塞/非阻塞
查看>>