js 爱恨情仇说 this

原文:js 爱恨情仇说 this

this 相信大家在写代码的时候都会遇到,可是怎么样才能用好this,估计这个还是有点困难的,虽然你有时候你会用到,但是他所在的具体的几个场景中所代表的是什么意思了?可能这个你就不是很清楚啊。这个就会在你使用的过程中出现很多的问题,于是今天我们来总结一下this,到底这个this?他真的有想象中的那么难吗?

其实可以总结为一句话:this指的是调用函数的那个对象

于是我们可以总结出this的四个调用场景:

(1) 方法模式:简单的说就是使用点表达式或是下标表达式来调用 这里定然是有对象的 这种情况下 this的绑定发生在调用的时候 绑的自然是调它的那个对象了。

于是我们看一下下面这个例子:也是博客园里面我感觉比较经典的一个例子:

var x = 2;
function test() {
    alert(this.x);
}
test();//2
这里text():出来的数据是2 其实我们可以这么理解:
var window.x = 2;
function test() {
    alert(window.x);//
}
window.test();//2

var x = 2; function test() { this.x = 0; } test(); alert(x);//0
换一种写法var window.x = 2; function test() { window.x = 0; } test(); alert(window.x);//0

大家能不能明白第一种方式的方法了。

2)函数模式:这个就更简单了,函数名加调用运算符('()')。不过要小心,这个this绑的可是全局对象,不管你写哪了。(可以理解成  你不给我指明了   我就自己给它加个全局对象)
当一个函数作为函数调用而不是方法调用时,这个this关键字引用全局对象。容易混淆的是,当一个嵌套的函数(作为函数)在一个包含的函数中调用,而这个包含的函数是作为方法调用的,这也是成立的:this关键字在包含的函数中有一个值,但是它却(不太直观地)引用嵌套的函数体的内部的全局对象。

var a = 'global';
var obj = {
    a : 'local',
    test : function(){
        function test1(){
            alert(this.a);//global 这是为什么呢?其实每个函数在被调用时,其活动对象都会自动获取两个特殊的变量:this和arguments。内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问到外部函数中的这两个变量了。这个比较蛋疼了怎么办啊?
        }
        alert(this.a);//local
        test1();
    }
};
obj.test();

下面我们将上面的代码简化看一下到底怎么回事啊?
var a = 'global';
var obj = {
    a : 'local',
    test : function(){
        alert(this.a);//local  其实我们可以这样写  alert(obj.a)
    }
};
obj.test(); 能不能理解到了啊

针对上面的问题我们提出如下的结局方案:

var a = 'global';
var obj = {
    a : 'local',
    test : function(){
        var that = this; //this的指向实际是指向它的调用的 这个理解对不对了希望纠正啊?
        function test1(){
            alert(that.a);//local
        }
        test1();
    }
};
obj.test();

3)构造器调用模式  一句话就是用new来调用的  new的时候this就绑定到新对象上了  比较好理解
1.new运算符后面必须跟着一个函数调用。new创建了一个新的没有任何属性的对象,然后调用该构造函数,把新的对象作为this关键字的值传递。
2.构造函数通常没有返回值。它们初始化作为this的值来传递的对象,并且没有返回值。但一个构造是允许返回一个对象值,并且如果它这么做,返回的对象成为new表达式的值。在此情况下,作为this的值的对象会被抛弃。

var person = function (string){
    this.name = string
}
person.prototype.getName = function (){
    return this.name
}

var myperson = new person('lin');
myperson.getName();
如果在一个函数前面带上一个new来调用,那么将创建一个隐藏到该函数的prototype成员的新对象,同时this将会被绑定到那个新对象上。new前缀也会改变return语句的行为。

可是在构造的原理到底什么样子的了?看着有点晕啊?

 function newOperator(Constr, args) {
     var thisValue = Object.create(Constr.prototype); // (1)
     var result = Constr.apply(thisValue, args);
     if (typeof result === 'object' && result !== null) {
         return result; // (2)
     }
     return thisValue;
}
参看地方@大额_skylar  佩服。引用一下

4)apply,call调用模式  apply,call是函数对象的方法,你想把谁绑定到this 就直接把它作为第一个参数传给apply或call就好了。

var a= {n: 'lin'};
var b = function (){
    return this.n;
}
console.log(b.apply(a, null));//输出lin

希望园友指正。继续努力加油 。下一个篇闭包了

我打算下面写一个专们研究这个的今天就不说了。继续努力。。。。。。希望园友指正

时间: 2024-10-31 02:30:54

js 爱恨情仇说 this的相关文章

机器学习和统计学的“爱恨情仇”可以结束了

更多深度文章,请关注:https://yq.aliyun.com/cloud        图片来自知乎 机器学习,是人工智能的一个子领域,主要关注于开发一些让计算机可以自动"学习"的技术.更具体说,机器学习是一种用于创建数据集分析程序的方法.机器学习跟统计学有着重要的关系,因为这两个领域都是研究数据分析,但是机器学习又不像统计学,机器学习关注的是计算实现的算法复杂度. 统计学,是在统计实践的基础上,自17世纪中叶产生并逐步发展起来的一门社会学科.它是研究如何测定.收集.整理.归纳和分

《娘》亮相安徽卫视王伟光演绎硬汉爱恨情仇

栓子(王伟光饰)与娘(斯琴高娃饰) 王伟光深情演绎"栓子" 新浪娱乐讯 即将在全国各大卫视亮相的亲情大戏<娘>,由斯琴高娃.宋春丽.王伟光等演员加盟.被观众誉为中国四大硬汉之一的王伟光,这次在该剧中饰演-栓子.演绎了一段亲情之间的爱恨情仇复杂的故事. 现代版"红嫂" 王伟光彪戏"过瘾" 在<娘>剧中,由斯琴高娃扮演的"娘"一角就是一位典型的"沂蒙红嫂",剧中,王伟光饰演徐秀林的亲生儿

仁宝和昆山笔记本之都的爱恨情仇

仁宝和昆山"笔记本之都"的爱恨情仇 王如晨 昆山出租车司机常讲一个笑话.说有三个人:韩国人.中国台湾人.昆山本地人.他们在江边看风景.忽然韩国人将手机扔到江里,说这东西韩国不稀罕:中国台湾人不动声色地将笔记本扔到江里,说太多了用不掉:昆山人想了想,做出要推台湾人到江里的架势-- 这笑话的意思是,当地台湾同胞众多.这个十多年前仍以阳澄湖大闸蟹.昆曲发源地.水乡周庄而闻名的农业小县,已是大陆台资企业布局最密集的城市.随着2006年台湾最后一条笔记本生产线迁到昆山,这里已是全球最大的笔记本生

聊聊打造HTML 5动感影集的爱恨情仇(动画性能篇)

  动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的视频集,且载体是HTML5(简称H5)页面,意味着可以随时分享到空间或朋友圈给好友欣赏.移动端区别于PC年代的相册视频,由于设备性能限制,每一个动画细节都需要认真优化,今天就来说说动感影集开发过程中的动画性能检测与优化的问题. 一.先利其器 -- Chrome Timeline&Rendering 性能分析前,我们先看看工具.Chrome浏览器带来的两个工具是发现性能问题的利器,它们是Timeline和Rendering. Timel

聊聊打造HTML 5动感影集的爱恨情仇

  动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的视频集,且载体是HTML5(简称H5)页面,意味着可以随时分享到空间或朋友圈给好友欣赏.移动端区别于PC年代的相册视频,由于设备性能限制,每一个动画细节都需要认真优化,今天就来说说动感影集开发过程中的动画性能检测与优化的问题. 一.先利其器 -- Chrome Timeline&Rendering 性能分析前,我们先看看工具.Chrome浏览器带来的两个工具是发现性能问题的利器,它们是Timeline和Rendering. Timel

大而全、小而美,品PG和MySQL间的“爱恨情仇”

最近数据库领域有几个比较火的事情: 第二件事是,北京云栖大会上阿里云宣布基于MySQL分支的AliSQL开源.AliSQL在MySQL社区版的基础上做了大量的性能与功能的优化改进,性能优于社区版MySQL70%左右,并且尤其适合电商.云计算以及金融等行业环境. 那么,PG和MySQL有哪些技术特性,哪个更强,带着这些问题,云栖说本期邀请了几位达人和大家讨论一番. 这几位大神可不一般,他们分别是: 第一位是来自阿里云技术专家周正中(德歌),贵为校长,在阿里云负责PG数据库架构的工作,社区也在大力做

C# 多线程,论多核时代爱恨情仇

博客前言 为什么要学习多线程? 2010年1月21日是10年某市公务员考试的报名截止日.因从下午2点开始,用于报名的北京市人事考试网瘫痪,原定于昨天下午5点截止的报名时间延迟至今天上午11点. 2011年3月11日下午5时(北京时间12日早9点),苹果发布新一代的平板电脑产品iPad 2,配备了A5.1Ghz双核处理器,这寓意着平板电脑和笔记本一同进入"多核时代". 同年6月18日,国内著名B2C---京东在周年庆典之际举行了"隆重"的大规模的促销活动,抢购随之而来

蟑螂与惠普电脑的爱恨情仇

百姓杂谈 ◎晋君 教师 央视的调查发现,全国各地多位消费者购买惠普笔记本后出现黑屏.花屏.温度过高及无法启动等问题.而惠普公司员工在接受央视采访时,则否认惠普笔记本存在设计缺陷,认为出现故障与消费者使用环境脏乱差有很大的关系,大学生寝室普遍存在的蟑螂问题,也被惠普 客服人员认为是造成问题的原因. 电脑问题和蟑螂有关系?这种标新立异的答复让人一头雾水:难道蟑螂和惠普电脑有仇,见了惠普电脑就搞破坏?抑或是蟑螂特别喜爱惠普电脑,见了惠普电脑就纷纷钻进去筑巢搭窝,繁育后代?惠普与蟑螂究竟是一种什么关系,

移动端芯片霸主ARM与电脑芯片巨头英特尔 x86的爱恨情仇

说到个人电脑芯片厂商,人们肯定会想到英特尔.而提到移动端芯片市场霸主,人们则会联想到ARM.这两家企业能成为现在行业中的霸者,与其精良的技术与严格的生产标准密不可分.英特尔专注于为用户提供高性能的服务支持,而ARM则能为移动端提供坚固性能与功耗的最佳解决方案. 但随着近年来个人台式机电脑与移动端设备划分界限的模糊,这两家公司开始逐渐出现交集.本文将从几个方面来对它们的技术进行比较,提供一个较有价值的参考. 顾名思义,处理器是一台计算机的核心,其肩负着控制与运算的重要任务,但是随着移动设备的兴起,