好!欢迎访问迷津渡口 现在时间是: 天气 °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
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
jkdeskisehir
 jkdeskisehir 2019-02-14 05:17回复
#87
<a href="http://www.atrapaniapp.com/nike-air-huarache-oransje-r%C3%B8d-obuvl">nike air huarache oransje r酶d</a> <a href="http://www.maplebeyond.com/nike-air-presto-skull-mens-purple-shoesh">nike air presto skull mens purple</a> <a href="http://www.collisionsix.com/femminile-asics-gel-noosa-tri-10-rosa-arancia-scarpei">femminile asics gel noosa tri 10 rosa arancia</a> <a href="http://www.todololitas.com/under-armour-curry-2-lila-schwarz-schuhej">under armour curry 2 lila schwarz</a> <a href="http://www.jcwjrlaw.com/purdue-boilermakers-new-era-ncaa-classic-shade-neo-39thirty-cap-hath">purdue boilermakers new era ncaa classic shade neo 39thirty cap</a> <a href="http://www.vstsblog.com/femmes-adidas-zx-750-hommesthe-verte-chaussuresh">femmes adidas zx 750 hommesthe verte</a>
jkdeskisehir http://www.jkdeskisehir.com/
hepalmak
 hepalmak 2019-02-14 04:03回复
#86
<a href="http://www.alloweducates.com/adidas-zx-900-weave-arancia-light-schuhee">adidas zx 900 weave arancia light</a> <a href="http://www.canusapos.com/lebron-soldier-10-todas-rojo-zone-scarpec">lebron soldier 10 todas rojo zone</a> <a href="http://www.geoffglisson.com/womens-nike-new-orleans-saints-9-drew-brees-white-vapor-untouchable-limited-player-nfl-jersey-nflw">womens nike new orleans saints 9 drew brees white vapor untouchable limited player nfl jersey</a> <a href="http://www.hitsattitude.com/limited-nike-camo-mens-thomas-davis-jersey-nfl-58-carolina-panthers-2018-salute-to-service-nflx">limited nike camo mens thomas davis jersey nfl 58 carolina panthers 2018 salute to service</a> <a href="http://www.jpstallard.com/salomo-s-lab-xt-bl%C3%A5-gr%C3%A5-kurpesa">salomo s lab xt bl氓 gr氓</a> <a href="http://www.tomapottery.com/air-jordan-retro-14-femmes-violet-vert-butyg">air jordan retro 14 femmes violet vert</a>
hepalmak http://www.hepalmak.com/
fsscas
 fsscas 2019-02-12 13:49回复
#85
<a href="http://www.egyptmaritime.com/nike-air-presto-comet-rosso-on-feet-scarpeh">nike air presto comet rosso on feet</a> <a href="http://www.erstube.com/nike-zoom-structure-19-femminile-argento-rosso-scarpei">nike zoom structure 19 femminile argento rosso</a> <a href="http://www.thecardplayer.com/nike-air-max-90-hyperfuse-himmelblau-rosa-schuheh">nike air max 90 hyperfuse himmelblau rosa</a> <a href="http://www.theweedaddict.com/nike-lunar-pegasus-89-laser-orange-pink-foil-shoesq">nike lunar pegasus 89 laser orange pink foil</a> <a href="http://www.thecampingman.com/golden-state-warriors-team-jersey-nfli">golden state warriors team jersey</a> <a href="http://www.otuzbircek.com/air-jordan-retro-1-mint-gr%C3%B8nn-gull-obuvp">air jordan retro 1 mint gr酶nn gull</a>
fsscas http://www.fsscas.com/
usafitno
 usafitno 2019-02-12 08:13回复
#84
<a href="http://www.ventnorlife.com/zx-flux-rosso-blu-chaussuresf">zx flux rosso blu</a> <a href="http://www.edenwins.com/asics-gel-lyte-v-winter-blanco-butya">asics gel lyte v winter blanco</a> <a href="http://www.ourfamilywebs.com/nike-dunk-high-premium-qs-galaxy-flight-guld-schuheg">nike dunk high premium qs galaxy flight guld</a> <a href="http://www.sfdawg.com/ralph-lauren-azul-and-blanco-striped-shirt-polou">ralph lauren azul and blanco striped shirt</a> <a href="http://www.viagradc.com/nike-roshe-two-flyknit-azul-p%C3%BArpura-chaussuresa">nike roshe two flyknit azul p煤rpura</a> <a href="http://www.duranerdogan.com/nike-hypervenom-bl%C3%A5-schuhed">nike hypervenom bl氓</a>
usafitno http://www.usafitno.com/
snifferwalk
 snifferwalk 2019-02-10 03:01回复
#83
<a href="http://www.seymourdugan.com/mens-nike-free-tr-green-red-shoesj">mens nike free tr green red</a> <a href="http://www.dkstekstil.com/nike-lunarglide-7-guld-gr%C3%B8n-skoi">nike lunarglide 7 guld gr酶n</a> <a href="http://www.thegillssell.com/femminile-asics-gel-noosa-tri-9-oro-verde-scarpel">femminile asics gel noosa tri 9 oro verde</a>
snifferwalk http://www.snifferwalk.com/
midlandroofer
 midlandroofer 2019-02-08 16:14回复
#82
<a href="http://www.sousoushop.com/nike-air-max-90-vt-oranger-chaussuresl">nike air max 90 vt oranger</a> <a href="http://www.rcfitcamp.com/nike-kobe-11-flyknit-jaune-chaussuresq">nike kobe 11 flyknit jaune</a> <a href="http://www.milajerdchat.com/dam%C3%A4nner-nike-air-max-tailwind-7-rot-schwarz-schuhei">dam盲nner nike air max tailwind 7 rot schwarz</a> <a href="http://www.girisweb.com/nike-zoom-pegasus-32-gr%C3%BCn-gold-schuheh">nike zoom pegasus 32 gr眉n gold</a> <a href="http://www.abcmovieplot.com/nike-lebron-ambassador-9-gull-oransje-obuvj">nike lebron ambassador 9 gull oransje</a> <a href="http://www.oldhalliwell.com/nike-lebron-13-cielo-blu-nero-scarpep">nike lebron 13 cielo blu nero</a>
midlandroofer http://www.midlandroofer.com/
grossavind
 grossavind 2019-02-08 13:47回复
#81
<a href="http://www.ortzproducts.com/nike-zoom-pegasus-31-kvinners-gul-s%C3%B8lv-obuvi">nike zoom pegasus 31 kvinners gul s酶lv</a> <a href="http://www.cooterscamera.com/femminile-nike-lebron-13-rosa-nero-scarpej">femminile nike lebron 13 rosa nero</a> <a href="http://www.marjalfun.com/nike-air-flight-89-sneakers-black-magnet-grey-shoesh">nike air flight 89 sneakers black magnet grey</a> <a href="http://www.alecsblog.com/mujeres-nike-flyknit-roshe-run-gris-zapatosp">mujeres nike flyknit roshe run gris</a> <a href="http://www.troudumonde.com/adidas-neo-cuero-blanco-verde-zapatosk">adidas neo cuero blanco verde</a> <a href="http://www.smilesdrdavid.com/north-face-denali-jacket-review-northfaceh">north face denali jacket review</a>
grossavind http://www.grossavind.com/
hyaluronicset
 hyaluronicset 2019-02-08 09:28回复
#80
<a href="http://www.gregertopsoil.com/nike-shox-2016-blu-cielo-blu-schuheg">nike shox 2016 blu cielo blu</a> <a href="http://www.leatherleif.com/air-max-90-essential-noir-online-kurpesc">air max 90 essential noir online</a> <a href="http://www.marcofabrin.com/air-jordan-retro-6-femminile-grigio-bianca-obuvg">air jordan retro 6 femminile grigio bianca</a> <a href="http://www.napscase.com/kobe-8-year-of-the-snake-noir-jordans-scarped">kobe 8 year of the snake noir jordans</a> <a href="http://www.pcforecasting.com/nike-air-max-thea-rosado-oxford-house-butya">nike air max thea rosado oxford house</a> <a href="http://www.tridenttrump.com/nike-dunk-high-svart-and-royal-bl%C3%A5-chaussuresf">nike dunk high svart and royal bl氓</a>
hyaluronicset http://www.hyaluronicset.com/
kscfoundation
 kscfoundation 2019-02-08 03:56回复
#79
<a href="http://www.headmull.com/yeezy-boost-750-azul-and-oro-chaussuresa">yeezy boost 750 azul and oro</a> <a href="http://www.inforoche.com/jordan-1-mid-wolf-grau-blau-schuhee">jordan 1 mid wolf grau blau</a> <a href="http://www.mytopdollar.com/nike-air-max-1-essential-noir-bleu-scarpea">nike air max 1 essential noir bleu</a> <a href="http://www.tipicousa.com/bon-march%C3%A9-jordan-3-hommes-kurpese">bon march茅 jordan 3 hommes</a> <a href="http://www.urevomedia.com/limited-nike-olive-mens-chukwuma-okorafor-jersey-nfl-76-pittsburgh-steelers-2017-salute-to-service-nflr">limited nike olive mens chukwuma okorafor jersey nfl 76 pittsburgh steelers 2017 salute to service</a> <a href="http://www.webdevbook.com/nike-kyrie-3-weave-rosado-gris-kurpesf">nike kyrie 3 weave rosado gris</a>
[url=http://www.kscfoundation.com/]kscfoundation[/url]
injost
 injost 2019-02-08 01:43回复
#78
<a href="http://www.cheapcoatsfr.com/nike-dunk-green-silver-skof">nike dunk green silver</a> <a href="http://www.mylinkstv.com/jordan-2-sneakers-list-skob">jordan 2 sneakers list</a> <a href="http://www.phxfam.com/new-york-rangers-beanie-hats-2017-hata">new york rangers beanie hats 2017</a> <a href="http://www.shanibazaar.com/curry-1-low-royal-blue-runninge">curry 1 low royal blue</a> <a href="http://www.imannequins.com/adidas-springblade-drive-wei%C3%9F-doors-schuhea">adidas springblade drive wei脽 doors</a> <a href="http://www.irentevent.com/jordan-6-sport-blau-champs-scarpeb">jordan 6 sport blau champs</a>
injost http://www.injost.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸