好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

javascript中this详解

javascript面向对象中this是非常重要的一个关键字。


理解this的原则:

1. 当一个函数或方法被调用时,拥有它的object会作为this传入。
2. new调用构造函数时this为实例化对象。
3. 可使用函数或方法改变函数或方法调用的对象,从而改变this指向。


应用原则的几种情况:

普通函数调用:

普通函数调用其实是通过Global对象调用的,在浏览器中Global对象作为Window对象的一部分实现了。

因此普通函数调用时this代表的是Global或Window对象。

例一:

function testthis(x) {
    this.x=x; 
}
// this是global对象,全局变量x未定义,则在赋值时同时定义一个全局变量x
testthis(7);
console.log(x);

结果为:

7

例二:

function testthis(x) {
    this.x=x;
}
// 定义声明一个全局变量x
var x=100;
console.log(x);
// this是global对象,全局变量x已定义,则修改全局变量x的值
testthis(7);
console.log(x);

结果为:

100
7

构造函数调用:

构造函数调用时会生成一个新对象,此时this代表的就是构造出来的新对象。

例子:

function Test(x) {
    this.x=x;
}
// 构造实例化对象时,this就是实例化的对象,因此x成为新对象的属性
var test=new Test(7);
console.log(test.x);

结果为:

7

对象方法调用:

一个对象调用方法时,this指的就是调用方法的对象。

例子:

function Test(x) {
    this.x=x;
    this.getX=function () {
        console.log(this.x);
    };
}
var test=new Test(7);
// 此时调用getX方法的是test对象,因此里面的this指的是test对象
test.getX();

结果为:

7

setTimeout和setInterval里this的转变

由于setTimeout和setInterval是普通函数调用,因此函数作用域里this指的是global对象。

在构造函数里,如果需要在setTimeout和setInterval函数里面获取实例化对象,需要借用变量获取,常用that变量名。

例子:

function Test(x) {
    this.x=x;
    this.getX=function() {
        console.log(x);
    };
    this.delayGetX=function() {
        // 错误:此时this为调用setTimeout的对象,即global对象,实际应为Test的实例化对象
        // setTimeout(this.getX,1000);  
        // 正确方法:
        // 首先将调用delayGetX的this对象,即Test实例化对象,赋值给that
        // 然后在setTimeout里面采用that调用getX方法
        var that=this;
        setTimeout(that.getX,1000); 
    };
}

结果为:

7

call和apply方法修改函数或方法调用对象

javascript提供了call和apply方法用于修改函数或者方法的调用对象。

例一:修改普通函数的调用对象

function test() {
    console.log(this.x);
}
// 定义一个全局变量x
var x=100;
// 直接调用this指的是全局对象global
test();

function TestX(x) {
    this.x=x;
}
// 实例化一个TestX对象
var testx=new TestX(7);
// 调用test函数,但此时this指向的对象是testx
test.call(testx);

结果为:

100
7

例二:修改方法调用的调用对象

function Test1(x,y) {
    this.x=x;
    this.y=y;
    this.add=function() {
        console.log(this.x+this.y);
    };
}
function Test2(x,y) {
    this.x=x;
    this.y=y;
}
// 实例化Test1对象,具有add方法
var test1=new Test1(1,2);
// 实例化Test2对象,并没有add方法
var test2=new Test2(3,4);
// 对象方法调用,此时方法的this指向test1对象
test1.add();
// 使用call方法修改add方法的this指向的对象,此时为test2对象
test1.add.call(test2);

结果为:

3
7

例三:使用call函数实现类继承

function Person(name) {
    this.name=name;
    this.showName=function() {
        console.log(this.name);
    };
}
function Student(name,school) {
    // 在Student构造函数里面调用Person构造函数
    // 将Student构造函数的实例化对象传递给Person构造函数
    // 此时调用Person构造函数的对象为Student实例化对象
    // 从而实例化Student对象可以继承Person的属性name和方法showName
    Person.call(this,name);
    this.school=school;
    this.showSchool=function() {
        console.log(this.school);
    }
}
// 光棍节来个宇宙泡妞学院^_^
var student=new Student('小指','宇宙泡妞学院');
// 调用继承来的showName方法
student.showName();
// 调用自己新定义的showSchool方法
student.showSchool();

结果为:

小指
宇宙泡妞学院

例四:使用apply函数使用Array对象的方法

apply函数和call函数的区别是:

apply函数的参数有两个,一个是thisObj,即传递调用修改的this对象,一个是参数数组。

call函数的参数包含多个,一个是thisObj,同上,另外是不定长的普通的参数。

两者thisObj参数是必选参数,剩下的是可选参数。

apply函数常用的场景是使数组里面的每个参数都可以使用数组对象方法:

var a=new Array(1,2,3);
var b=new Array(4,5,6);
// 合并a数组和b数组到a数组
a.push.apply(a,b);
console.log(a);

结果:

[1, 2, 3, 4, 5, 6]


小指才疏学浅,本文若有不足之处,请不吝赐教~

点赞0
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
industrialegy
 industrialegy 约 9 小时前回复
#187
<a href="http://www.truthtapes.com/mennns-nike-blazer-gull-gr%C3%A5-obuvi">mennns nike blazer gull gr氓</a> <a href="http://www.veskopetrov.com/hombres-nike-air-max-tn-azul-verde-zapatosp">hombres nike air max tn azul verde</a> <a href="http://www.kaosmotogp.com/air-jordan-true-flight-gr%C3%B8n-r%C3%B8d-skol">air jordan true flight gr酶n r酶d</a> <a href="http://www.doularhythms.com/adidas-forum-mid-rosa-blu-scarpeh">adidas forum mid rosa blu</a> <a href="http://www.animalpainvet.com/nike-kd-8-high-cielo-blu-gituttio-scarpei">nike kd 8 high cielo blu gituttio</a> <a href="http://www.texarillo.com/air-jordan-retro-13-dam%C3%A4nner-schwarz-himmelblau-schuheh">air jordan retro 13 dam盲nner schwarz himmelblau</a>
industrialegy http://www.industrialegy.com/
dakvideo
 dakvideo 约 9 小时前回复
#186
<a href="http://www.cherylblogs.com/mujer-salomon-s-lab-sense-royal-azul-volt-zapatosl">mujer salomon s lab sense royal azul volt</a> <a href="http://www.livefreshpbc.com/nike-flyknit-racer-white-black-1-shoesk">nike flyknit racer white black 1</a> <a href="http://www.bacaiptek.com/nike-hypervenom-phantom-ag-hvit-svart-gul-skull-obuvi">nike hypervenom phantom ag hvit svart gul skull</a> <a href="http://www.socabets.com/menn-nike-air-presto-mid-hvit-svart-hot-lava-obuvk">menn nike air presto mid hvit svart hot lava</a> <a href="http://www.sgeventportal.com/kvinner-nike-sock-dart-sp-fragmennt-fluorescence-gr%C3%B8nn-obuvi">kvinner nike sock dart sp fragmennt fluorescence gr酶nn</a> <a href="http://www.isimsizsevda.com/under-armour-clutchfit-drive-stephen-curry-amarillo-azul-zapatosl">under armour clutchfit drive stephen curry amarillo azul</a>
dakvideo http://www.dakvideo.com/
thehogrider
 thehogrider 约 18 小时前回复
#185
<a href="http://www.sguerradesign.com/nike-air-force-1-low-forest-gr%C3%B8nn-obuvl">nike air force 1 low forest gr酶nn</a> <a href="http://www.zeneventsja.com/kvinders-nike-air-max-bw-lilla-appelsin-skoj">kvinders nike air max bw lilla appelsin</a> <a href="http://www.adharaweb.com/nike-kobe-12-grigio-arancia-scarpel">nike kobe 12 grigio arancia</a> <a href="http://www.jrelselaw.com/mens-nike-roshe-run-speckle-yellow-gold-shoesj">mens nike roshe run speckle yellow gold</a> <a href="http://www.intellalegal.com/nike-roshe-run-blomstret-gr%C3%B8n-appelsin-skok">nike roshe run blomstret gr酶n appelsin</a> <a href="http://www.carmelscoffee.com/adidas-neo-lazy-rosa-gr%C3%A5-obuvp">adidas neo lazy rosa gr氓</a>
thehogrider http://www.thehogrider.com/
rizeingilizce
 rizeingilizce 2019-04-24 15:38回复
#184
<a href="http://www.htpmimoza.com/adidas-superstar-weave-dark-blau-schuheh">adidas superstar weave dark blau</a> <a href="http://www.ayakkabiyeri.com/nike-air-max-tn-mens-red-shoesk">nike air max tn mens red</a> <a href="http://www.sozoteki.com/2018-mk-selma-satchels-yi13-top-zip-grommet-large-grey-mkh">2018 mk selma satchels yi13 top zip grommet large grey</a> <a href="http://www.njforward.com/nike-hypervenom-phantom-fg-bl%C3%A5-oransje-gr%C3%B8nn-obuvi">nike hypervenom phantom fg bl氓 oransje gr酶nn</a> <a href="http://www.crimediainc.com/nike-air-max-1-femminile-nero-scarpek">nike air max 1 femminile nero</a> <a href="http://www.claybrookpenn.com/air-jordan-10-steel-grey-shoesi">air jordan 10 steel grey</a>
rizeingilizce http://www.rizeingilizce.com/
oheyewear
 oheyewear 2019-04-24 08:16回复
#183
<a href="http://www.setusoftware.com/m%C3%A6nd-kobe-10-gul-gr%C3%A5-r%C3%B8d-sort-skok">m忙nd kobe 10 gul gr氓 r酶d sort</a> <a href="http://www.shopteamcubs.com/adidas-tubular-viral-raw-rosa-schuheh">adidas tubular viral raw rosa</a> <a href="http://www.danieldavinci.com/adidas-neo-lite-racer-purple-shoesk">adidas neo lite racer purple</a> <a href="http://www.lovirani.com/nike-air-max-90-lunar-r%C3%B8d-skol">nike air max 90 lunar r酶d</a> <a href="http://www.rosebites.com/kd-8-svart-hvit-oransje-obuvk">kd 8 svart hvit oransje</a> <a href="http://www.webrushllc.com/nike-hyperrev-2017-nero-scarpei">nike hyperrev 2017 nero</a>
oheyewear http://www.oheyewear.com/
elitgulsen
 elitgulsen 2019-04-24 03:17回复
#182
<a href="http://www.wowsurffest.com/nike-flyknit-racer-mens-black-and-white-shoesl">nike flyknit racer mens black and white</a> <a href="http://www.yepigamescom.com/white-ralph-lauren-hoodie-poloh">white ralph lauren hoodie</a> <a href="http://www.elgintransfer.com/nike-air-max-90-herre-gr%C3%A5-skok">nike air max 90 herre gr氓</a> <a href="http://www.allstuffcats.com/adidas-gazelle-og-dam%C3%A4nner-rot-schuheh">adidas gazelle og dam盲nner rot</a> <a href="http://www.mywheelcity.com/adidas-predator-malice-rugby-boots-shoesk">adidas predator malice rugby boots</a> <a href="http://www.sabalink.com/adidas-gazelle-og-hvid-skol">adidas gazelle og hvid</a>
elitgulsen http://www.elitgulsen.com/
emcetolerie
 emcetolerie 2019-04-23 03:19回复
#181
<a href="http://www.sousoushop.com/femmes-nike-roshe-run-speckle-rose-violet-chaussuresh">femmes nike roshe run speckle rose violet</a> <a href="http://www.rcfitcamp.com/nike-roshe-two-blu-argento-scarpeq">nike roshe two blu argento</a> <a href="http://www.milajerdchat.com/nike-lunarglide-7-womens-green-blue-shoesj">nike lunarglide 7 womens green blue</a> <a href="http://www.girisweb.com/nike-shox-turbo-21-s%C3%B8lv-gul-skoi">nike shox turbo 21 s酶lv gul</a> <a href="http://www.abcmovieplot.com/femminile-nike-roshe-run-speckle-gituttio-rosa-scarpel">femminile nike roshe run speckle gituttio rosa</a> <a href="http://www.oldhalliwell.com/adidas-nmd-runner-orange-blue-shoesj">adidas nmd runner orange blue</a>
emcetolerie http://www.emcetolerie.com/
florianscafe
 florianscafe 2019-04-22 13:44回复
#180
<a href="http://www.munchstrom.net/kd-7-orange-and-blau-xanax-scarpee">kd 7 orange and blau xanax</a> <a href="http://www.mycouponexpert.net/nike-air-max-thea-flyknit-gr%C3%B8n-hvid-butye">nike air max thea flyknit gr酶n hvid</a> <a href="http://www.mydxp.net/jordan-11-royal-azul-butyf">jordan 11 royal azul</a> <a href="http://www.myersmotors.net/salomon-s-lab-sense-negro-yeezy-schuhea">salomon s lab sense negro yeezy</a> <a href="http://www.mysaltwatersandal.net/air-jordan-cp3-grau-braun-chaussuresa">air jordan cp3 grau braun</a> <a href="http://www.nadinesproperties.net/air-max-thea-noir-and-teal-obuva">air max thea noir and teal</a>
florianscafe http://www.florianscafe.net/
tahoebathworks
 tahoebathworks 2019-04-22 02:41回复
#179
<a href="http://www.abcmaster.net/nike-free-flyknit-4.0-wei%C3%9F-dam%C3%A4nner-schuhee">nike free flyknit 4.0 wei脽 dam盲nner</a> <a href="http://www.abracadabranche.net/kobe-11-blu-oro-scarpeb">kobe 11 blu oro</a> <a href="http://www.accademiadeilincei.net/nike-zoom-structure-20-marr%C3%B3n-blanco-schuhed">nike zoom structure 20 marr贸n blanco</a> <a href="http://www.addaxia.net/nike-air-max-2017-brun-r%C3%B8d-butyf">nike air max 2017 brun r酶d</a> <a href="http://www.adultlivesexx.net/nike-air-force-1-high-lv8-big-barn-sko-obuve">nike air force 1 high lv8 big barn sko</a> <a href="http://www.affluentadvisors.net/nike-air-max-dual-d-golf-zapatos-obuvg">nike air max dual d golf zapatos</a>
tahoebathworks http://www.tahoebathworks.net/
dakvideo
 dakvideo 2019-04-21 12:27回复
#178
<a href="http://www.seesoshow.com/supra-tk-society-hombres-negro-suede-zapatosk">supra tk society hombres negro suede</a> <a href="http://www.crypolio.com/the-north-face-m-apex-bionic-jacket-northfaceh">the north face m apex bionic jacket</a> <a href="http://www.vtrvideo.com/frau-nike-blazer-high-i-schwarz-rosa-schuhek">frau nike blazer high i schwarz rosa</a> <a href="http://www.asoseinhalb.com/kvinder-nike-air-rejuven8-mule-3-sandals-bl%C3%A5-hvid-skoi">kvinder nike air rejuven8 mule 3 sandals bl氓 hvid</a> <a href="http://www.handydgh.com/adidas-originals-samba-blanc-chaussuresh">adidas originals samba blanc</a> <a href="http://www.blakefanz.com/houston-texans-47-nfl-cardinal-clean-up-cap-hatl">houston texans 47 nfl cardinal clean up cap</a>
[url=http://www.dakvideo.com/]dakvideo[/url]
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸