js 爱恨情仇说 this
this 相信大家在写代码的时候都会遇到,可是怎么样才能用好this,估计这个还是有点困难的,虽然你有时候你会用到,但是他所在的具体的几个场景中所代表的是什么意思了?可能这个你就不是很清楚啊。这个就会在你使用的过程中出现很多的问题,于是今天我们来总结一下this,到底这个this?他真的有想象中的那么难吗?
其实可以总结为一句话:this指的是调用函数的那个对象
于是我们可以总结出this的四个调用场景:
(1) 方法模式:简单的说就是使用点表达式或是下标表达式来调用 这里定然是有对象的 这种情况下 this的绑定发生在调用的时候 绑的自然是调它的那个对象了。
于是我们看一下下面这个例子:也是博客园里面我感觉比较经典的一个例子:
var x = 2;
function test() {
alert(this.x);
}
test();//
这里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
希望园友指正。继续努力加油 。下一个篇闭包了
我打算下面写一个专们研究这个的今天就不说了。继续努力。。。。。。希望园友指正
js 爱恨情仇说 this的更多相关文章
- web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG,完美解决
[问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...
- Menu与ActionBar的爱恨情仇
最近在开发一款音乐播放器,在开发过程中遇到了一点小麻烦,通过android API搞清楚了Menu与ActionBar的爱恨情仇,写了个小Demo祭奠一下那些年我们陷进去的坑,有不对的地方请大神们批评 ...
- 注解:大话AOP与Android的爱恨情仇
转载:大话AOP与Android的爱恨情仇 1. AOP与OOP的区别 平时我接触多的就是OOP(Object Oriented Programming面向对象).AOP(Aspect Oriente ...
- 除了love和hate,还能怎么表达那些年的“爱恨情仇”?
实用英语 帮你全面提高英语水平 关注 童鞋们每次刷美剧的时候,相信都会被CP感满满的男女主角虐得体无完肤吧. 可是,一到我们自己表达爱意或者恨意的时候,却苦于词穷,只会用love, like, hat ...
- 对json的爱恨情仇
本文回想了对json的爱恨情仇. C++有风险,使用需慎重. 本文相关代码在:http://download.csdn.net/detail/baihacker/7862785 当中的測试数据不在里面 ...
- String、StringBuilder、StringBuffer的爱恨情仇
第三阶段 JAVA常见对象的学习 StringBuffer和StringBuilder类 (一) StringBuffer类的概述 (1) 基本概述 下文以StringBuffer为例 前面我们用字符 ...
- [转帖]探秘华为(一):华为和H3C(华三)的爱恨情仇史!
探秘华为(一):华为和H3C(华三)的爱恨情仇史! https://baijiahao.baidu.com/s?id=1620703498823290828&wfr=spider&fo ...
- Tidyverse|数据列的分分合合,爱恨情仇
Tidyverse|数据列的分分合合,爱恨情仇 本文首发于“生信补给站”Tidyverse|数据列的分分合合,一分多,多合一 TCGA数据挖掘可做很多分析,前期数据“清洗”费时费力但很需要. 比如基因 ...
- pytorch和tensorflow的爱恨情仇之基本数据类型
自己一直以来都是使用的pytorch,最近打算好好的看下tensorflow,新开一个系列:pytorch和tensorflow的爱恨情仇(相爱相杀...) 无论学习什么框架或者是什么编程语言,最基础 ...
随机推荐
- Linux--niaoge
鸟哥的Linux私房菜 网络基础: 那 TCP/IP 是如何运作的呢?我们就拿妳常常连上的 Yahoo 入口网站来做个说明好了,整个联机的状态可以这样看: 应用程序阶段:妳打开浏览器,在浏览器上面输入 ...
- 【06-18】CentOS使用笔记
使用中文输入法 搜狗输入法只支持Ubuntu sudo yum install "@Chinese Support" [系统]--->[首选项]--->[输入法]--& ...
- WP8下实现刮刮乐(橡皮擦)功能
说到刮刮乐这个功能,我们最先想到的是上下两张(长方形)重叠,之后对上面这张图片进行操作. 我的想法是:通过手势,让手指划过的地方变成透明的,底部就会显示了. 那如何让图片变为透明呢?这就要对图片的像素 ...
- [Recommendation System] 推荐系统之协同过滤(CF)算法详解和实现
1 集体智慧和协同过滤 1.1 什么是集体智慧(社会计算)? 集体智慧 (Collective Intelligence) 并不是 Web2.0 时代特有的,只是在 Web2.0 时代,大家在 Web ...
- PHP图片裁剪与缩放 / 无损裁剪图片
图片太大且规格不统一,显示的控制需要靠JavaScript来完成,用在移动设备上时显示效果不好且流量巨大,需要对现有图片库的图片进行一次处理,生成符合移动设备用的缩略图,将原来客户端JS做的工作转移到 ...
- angular-ui-bootstrap-modal必须要说的几个点(转)
angular-ui-bootstrap-modal必须要说的几个点 摘要: 基于angular来实现的一个bootstrap模态框,有些不得不说的地方 项目中以前就经常用到模态框,但是一直没有时间来 ...
- 报错注入分析之(count()、rand()、group by)分析,被大佬称为floor报错注入
PS:在这几天的学习当中很多的文章都将此注入方式称之为“floor报错分析”但经过我这几天的学习.个人觉得不该如此称呼!若君有意请详细阅读此篇文章.特别感谢米怀特的开导,说句实在的研究这个注入有四天了 ...
- PYTHON 深拷贝,浅拷贝
声明:本篇笔记,模仿与其它博客中的内容 浅拷贝 浅拷贝,在内存中只额外创建第一层数据 import copy n1 = {"k1": "wu", "k ...
- ecshop二次开发常用代码
通过index控制循环次数.在循环中将index作为if的判断条件,对循环进行控制.这里index是从0开始的.如果index<2,会进行两次循环. <!--{foreach from=$ ...
- IEnumerable和IEnumerable<T>接口
IEnumerable和IEnumerable<T>接口 IEnumerable和IEnumerable<T>接口在.NET中是非常重要的接口,它允许开发人员定义foreach ...