javascript中this,apply,call,bind的学习笔记

一 、关于this

Javascript中的this经常让人糊涂,但总的一个原则就是,this总是指向一个对象,而具体指向哪个对象是在javascript执行阶段由执行环境动态绑定的,而非在javascript初始化阶段声明时的环境

实际中,this的指向大概分为以下四类:

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

(2) 作为普通函数调用

(3) 构造器调用

(4) Function,prototype.call或Function.prototype.apply,动态的改变出入函数的this

1.作为对象的方法调用时,this指向改对象

var obj = {

name:"xiaoming",

age:25,

say:function(){

alert(this === obj);

alert("我叫" + this.name + "我今年" + this.age + "岁");

}

};

obj.say();

2.作为普通函数调用,this总是指向全局对象window

alert(this);  //window

var name = "xiaoming";

function getName(){

return this.name;

}

alert(getName()); //xiaoming

3. 构造器调用, 当用 new 运算符调用函数时,该函数总是会返回一个对象,通常情况下,构造函数里的 this 就指向返回的这个对象

function Person(){

this.name = "xiaoming";

}

var xiaoming = new Person();

alert(xiaoming.name);

在构造函数中还有一种特例,那就是在构造函数中显示的返回一个对象,那这个this就不跟我们期待的一样了,例如:

function Person(){

this.name = "xiaoming";

return {

name:"我是另外一个xiaoming"

}

}

var which = new Person();

alert(which.name); //我是另外一个xiaoming


二 、接下来说说apply.call,bind的区别以及他们中的this

var xiaoming = {

name:"xiaoming",

age:25,

say:function(){

console.log("我叫"+this.name+",我今年"+this.age+"岁了。");

}

}

var xiaoli = {

name:"xiaoli",

age:27

}

xiaoming.say() //很明显,就是"我叫xiaoming,我今年25岁了"

//如果我现在想打印出xiaoli的名字,怎么办呢?那就用到了call,apply.bind

//他们的作用就是改变this指向的对象

xiaoming.say.call(xiaoli);

xiaoming.say.apply(xiaoli);

xiaoming.say.bind(xiaoli)();

从以上代码中我们发现call.bind,apply都可以改变this的指向,但是好像call和apply没什么区别呀?难道两个的作用是一样的?答案是当然不一样。

bind的区别已经很明显了,bind后面需要加一个(),这又是为什么呢?

这是因为call和apply直接返回的是函数调用后的结构,而bind方法返回的是一个函数,不信,你可以typeof一下,看返回的是不是function哦。

好,接下来解决call和apply到底有什么区别呢?如果现在我把代码改一下

var xiaoming = {

name:"xiaoming",

age:25,

say:function(school,hobby){

console.log(this.name+"|"+this.age+"|"+school+hobby);

}

}

var xiaoli = {

name:"xiaoli",

age:27

}

xiaoming.say.call(xiaoli,"shcool1","羽毛球");

xiaoming.say.apply(xiaoli,["school1","羽毛球"])

从上面可以看出,他们的区别无非就是传参的形式不一样,apply必须把参数放进数组

三、最后再来说说bind方法

bind方法就是把函数绑定到一个对象上。但里面有一点坑是,用bind返回的函数,它是没有prototype属性的。

四 .另外apply和call还能继承

function Person(name,age){

this.name = name;

this.age = age;

}

function student(name,age,className){

Person.call(this,name,age);

this.className = className;

}

var Amy = new student("Amy",25,"一年级");

console.log(Amy.age)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容