几句话带你理解JS中的this、闭包、原型链


Posted in Javascript onSeptember 26, 2016

原型链

所有对象都是基于Object.prototype,Object.prototype就是JavaScript的根对象,在Object.prototype中定义的方法都可以被其它对象访问到,当然也可以被重写了,所以直接在Object.prototype上调用的是原始功能的toString()方法,该方法会放回参数对象的内置属性[[class]]的值,这个值是个字符串,比如'[Object String]'

要理解原型链机制的话,首先得知道根本原因:JavaScript中的对象都有一个内置属性[[Prototype]],这个属性和非标准的__proto__属性一样,__proto__在ES6中被纳入标准了,可以说它们基本上是等价的,但内置属性是无法访问到的。对象之间通过内置属性[[Prototype]]关联了起来就形成了原型链,而原型链的顶层就是根对象Object.prototype,Object.prototype的原型将是null,即Object.prototype.__proto__ === null;

例如:

在访问对象的属性的时候,如:obj.a,首先查找自身,没有,就到它的内置属性[[Prototype]]所引用的对象上找,还是没有,就继续在这个上层对象的内置属性[[Prototype]]所引用的对象上找,一直找到根对象Object.prototype,找不到就返回undefined;

this

理解this的第一步就是要明白:this既不指向函数自身,也不指向函数的词法作用域;

this是在运行时进行绑定的,而不是在编写时绑定,它的上下文取决于函数调用时的各种条件;

this的绑定和函数声明的位置没有任何关系,只取决于函数的调用位置和调用方式;

this绑定规则有4点:按优先级1到4判断

1.由new调用?绑定到新创建的空对象;

2.由call、apply、bind调用?绑定到指定的参数对象;如foo.call(obj)

3.由上下文对象调用?绑定到这个上下文对象;如obj.foo()

4.默认情况下绑定到全局对象,foo();在严格模式下绑定到undefined;

闭包

function foo(){
var a = 2;
function bar(){}
return bar;
}
var a = foo();
a();

闭包:不是指函数bar也不是a,它是一个引用,这个引用被内部函数bar持有,这个引用指向外部函数foo的整个作用域,它使得这个作用域即使在外部函数foo()执行后也不会被垃圾回收器回收。也就是说这个外部函数foo的作用域就是闭包本身。
无论通过何种手段(直接或间接)将内部函数传递到所在的词法作用域以外,它都会持有对原始定义作用域的引用,无论在何处执行这个函数都会使用闭包。

var fn; //间接传递函数
function foo(){
var a = 2;
function baz(){
console.log(a);
}
fn = baz;
}
function bar(){ fn();}
foo();
bar(); function foo(){
var a = 2;
function baz(){
console.log(a);
}
bar(baz);
}
function bar(fn){ fn(); }
Javascript 相关文章推荐
再谈javascript面向对象编程
Mar 18 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 #Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 #Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 #Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 #Javascript
关于js原型的面试题讲解
Sep 25 #Javascript
前端设计师们最常用的JS代码汇总
Sep 25 #Javascript
JavaScript使用Range调色及透明度实例
Sep 25 #Javascript
You might like
smarty section简介与用法分析
2008/10/03 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
jQuery的12招常用技巧分享
2011/08/08 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
jquery $("#variable") 循环改变variable的值示例
2014/02/23 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python 中的with关键字使用详解
2016/09/11 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python实现微信自动回复功能
2018/04/11 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
什么是.net
2015/08/03 面试题
硕士研究生个人求职信
2013/12/04 职场文书
项目投资意向书
2014/04/01 职场文书
工作说明书范文
2014/05/07 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2014最新离职证明范本
2014/09/12 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
主婚人致辞精选
2015/07/28 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android