程序猿头头（this的绑定）

this
1.默认绑定
有this,前面没有任何元素)不带任何修饰的函数进行调用的，只能采用默认绑定，this指向window

function foo () {console.log(this);  //windowconsole.log(this.a);
}
var a = 12;
foo();  //12思考
var a = 12;
function test() {this.a = 13; //重新付了一个值 a=13
}
test();
console.log(a); //? 13

2.隐式绑定
对象内部包含一个指向函数的属性，并通过这个属性间接引用这个函数，从而把this间接（隐式）绑定到这个对象上

//1.
function foo() {console.log(this);  //{a: 2, foo: ƒ}console.log(this.a);//2
}
var obj = {a: 2,foo: foo
}
obj.foo();
//2.
function foo() {console.log(this.a);
}
var obj2 = {a: 1,foo: foo
}
var obj1 = {a: 2,obj2: obj2
}
obj1.obj2.foo();    //1
var obj3 = {a: 3,obj1: obj1
}
obj3.obj1.obj2.foo(); //1

3.显示绑定
call,apply,bind都属于显式绑定一类，显示绑定后this便无法再修改

function foo() {console.log(this);   //{a: 2}console.log(this.a);  //2
}
var obj = {a: 2
}
foo.call(obj);

function foo() {console.log(this);   //{a: 2}console.log(this.a);  //2
}
var obj = {a: 2
}
foo.apply(obj);

function foo() {console.log(this);   //{a: 2}console.log(this.a);    //2
}
var obj = {a: 2
}
var f = foo.bind(obj);
f();

4.new绑定
实例化一个新对象后，会将实例对象绑定到函数调用中的this上。
绑定优先级：new绑定>显示绑定>隐式绑定>默认绑定

function foo(a) {console.log(this);this.a = a;console.log(this.a); //2
}
var bar = new foo(2);
console.log(bar.a); //2

5.箭头函数
es6新增的()=>箭头函数

//1.外层有函数：外层函数的`this`就是箭头函数的`this`
var obj = {a: 1,foo() {//this===objvar fn = () => {//this===objconsole.log(this.a);//this.a===1};fn();}
}
obj.foo();  //1

//2.外层没有函数：箭头函数的`this`就是`window`
var a = 123;
var obj = {a: 1,//this===windowfoo: () => {console.log(this.a); //window.a=123}
}
obj.foo();  //123

程序猿头头（this的绑定）相关推荐

程序猿小白应该注意什么
在学校敲代码的时候,考虑的可能是怎么实现这个功能,怎么样把功能做的酷一点,可是当你进入了公司,你就会发现可能代码把功能实现是一方面的,你代码还需要良好的代码风格,命名规范,可读性易于维护,以及性能等等 ...
程序猿修仙之路--数据结构之你是否真的懂数组？ c#socket TCP同步网络通信用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截...
程序猿修仙之路--数据结构之你是否真的懂数组? 数据结构但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构 .要想在之后的江湖历练中通关,数据结构必不可少.数据 ...
一个Java程序猿眼中的前后端分离以及Vue.js入门
原文:https://mp.weixin.qq.com/s/HWRYAR16vLE1XFep6_i1tA 松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的, ...
《程序猿的呐喊》读书笔记（下）
接着<程序猿的呐喊>读书笔记(上).继续分享下篇.这次干货比較多哦.有静动态类型的优缺点.强弱类型系统的对抗.设计模式.程序猿的数学.编译器的重要性以及保守派自由派的较量,一时消化不了的建 ...
从此走上一条iOS程序猿不归路。。。
新的城市,新的生活!前不久刚刚结束了苦逼的面试找工作之旅,期间也小有收货,如今正处年底工作闲暇之余,将前一阵子陆陆续续的总结整理了一下,本人菜鸟程序猿一只,水平有限,本文总结的知识不算深入,比较浅显, ...
一位Erlang程序猿的自白
Erlang不能错过的盛宴 (快步进入Erlang的世界) 作者:成立涛 (litaocheng@gmail.com) 作为程序猿,我们以前闻听非常多"业界动态","技术 ...
程序猿推送利器：使用Python+Server酱打造微信通知推送利器
你是否经历过服务器挂掉却浑然不知的彷徨?你是否感受过服务停止很久后才发现事情的严重的感觉?是的,你急需一款轻量级的推送通知系统! Server酱正是这么一款程序猿的好帮手,她通过提供一个超轻量级的AP ...
有个这样的程序猿男友你是否愿意嫁给他呢？
我的男友,是程序猿. 是的,就是你们所认识的那种研究代码的程序员. 对于这样一群耀眼的互联网宠儿们,最常见的标签是高智商和低情商.见过不少女孩吐槽程序猿不懂浪漫和人情世故,比较木讷不会说话. 说白了, ...
程序猿小白应该注意什么 1
在学校敲代码的时候,考虑的可能是怎么实现这个功能,怎么样把功能做的酷一点,可是当你进入了公司,你就会发现可能代码把功能实现是一方面的,你代码还需要良好的代码风格,命名规范,可读性易于维护,以及性能等等 ...
[JQuery实现] 测测你今天的运势如何？（程序猿老黄历）
用程序猿老黄历,来测测你的运势吧写在前面 1. 什么是 JSON ? 2. 什么是 ajax 请求 ? 3. JQuery 简单开发 4. 程序猿老黄历实现结束语写在前面本篇文章主要内容是通过 ...

程序猿头头（this的绑定）

程序猿头头（this的绑定）相关推荐

最新文章

热门文章