当前位置: 首页 > news >正文

Javascript理解this对象

this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象。

通过以下几个例子加深对this的理解。

(1)作为函数调用

var name = 'Jenny';
function person() {
    return this.name;
}
console.log(person());  //Jenny

上面这个例子在全局作用域中调用person(),此时的调用对象为window,因此this指向window,在window中定义了name变量,因此this.name相当于window.name,为Jenny。

再看下面一个例子:

function a() {
    function b() {
        function c() {
            console.log(this);
        }
        c();
    }
    b();
}
a();    // window

这个例子中,也同为函数调用,因此this指向window。

(2)作为对象的方法调用

var name = 'Jenny';
var obj = {
    name: 'Danny',
    person: function() {
        return this.name;
    }
};
console.log(obj.person());  //Danny

在这个例子中,person()函数在obj对象中定义,调用时是作为obj对象的方法进行调用,因此此时的this指向obj,obj里面定义了name属性,值为Danny,因此this.name = "Danny"。

(3)作为构造函数调用

作为构造函数调用和普通函数调用的区别是,构造函数使用new关键字创建一个实例,此时this指向实例对象。

function person() {
    return new person.prototype.init();
}
person.prototype = {
    init: function() {
        return this.name;
    },
    name: 'Brain'
};
console.log(person().name); //undefined

这是一个比较复杂的例子,涉及到了原型。

首先,创建构造函数person,为函数重新定义原型,在原型上定义了两个方法init和name,其中init返回this.name。

调用person函数的name属性,发现返回的是undefined,为什么不是Brain呢?

我们看,调用person,返回person.prototype.init()的一个实例,假设返回的这个实例名为a,那么此时的this指向的就是a,a作为person.prototype.init()的一个实例,那么所有定义在person.prototype.init()中的方法等都可以被a调用,但是name属性定义在person的原型中,而非init函数中,因此返回undefined。

(4)apply和call

使用apply()和call()可以改变调用函数的对象,第一个参数为改变后调用这个函数的对象,其中apply()的第二个参数为一个数组,call的第二个参数为每个参数。

function person() {
    return this.name;
}
var obj = {
    name: 'Jenny',
    age: 18
};
console.log(person.apply(obj));  //Jenny

使用apply函数改变了调用person的对象,是在obj对象下面调用person,不再是在window对象下调用了,因此this指向obj,this.name = "Jenny";

文章标题:Javascript理解this对象
转载自https://www.cnblogs.com/nuanriqingfeng/p/5794632.html
标签:js,this对象

相关文章:

  • GNUPG
  • 零基础Python爬虫实现(百度贴吧)
  • 我对CopyOnWrite的思考
  • RabbitMQ入门-路由-有选择的接受消息
  • 报告称国产智能手机全球市场份额33.1% 超过韩国
  • iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge
  • 深入理解java虚拟机 精华总结(面试)
  • Spring框架
  • DTS-071007 表结构在源库和目标库中不一致
  • 算法学习之路|聪明的打字员
  • [学习笔记—Objective-C]《Objective-C-基础教程 第2版》第二章~第七章
  • MongoDB入门(二)——MongoDB下载与安装
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • centos7设置静态IP
  • 64位x86的函数调用栈布局
  • @jsonView过滤属性
  • 【EOS】Cleos基础
  • 【腾讯Bugly干货分享】从0到1打造直播 App
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • ABAP的include关键字,Java的import, C的include和C4C ABSL 的import比较
  • emacs初体验
  • FineReport中如何实现自动滚屏效果
  • Git 使用集
  • IndexedDB
  • linux学习笔记
  • python docx文档转html页面
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • tab.js分享及浏览器兼容性问题汇总
  • 翻译--Thinking in React
  • 后端_MYSQL
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 小李飞刀:SQL题目刷起来!
  • 一道闭包题引发的思考
  • 用Visual Studio开发以太坊智能合约
  • 阿里云服务器购买完整流程
  • 通过调用文摘列表API获取文摘
  • #### go map 底层结构 ####
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (13)Latex:基于ΤΕΧ的自动排版系统——写论文必备
  • (2)(2.10) LTM telemetry
  • (42)STM32——LCD显示屏实验笔记
  • (arch)linux 转换文件编码格式
  • (C#)获取字符编码的类
  • (C语言)共用体union的用法举例
  • (Oracle)SQL优化技巧(一):分页查询
  • (第二周)效能测试
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
  • (九)c52学习之旅-定时器
  • (六)库存超卖案例实战——使用mysql分布式锁解决“超卖”问题
  • (译)计算距离、方位和更多经纬度之间的点
  • (转)nsfocus-绿盟科技笔试题目
  • (转)Sublime Text3配置Lua运行环境
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】