几句话带你理解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 通用简单的table选项卡实现
May 07 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jquery each()源代码
2011/02/14 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python实现配置文件备份的方法
2015/07/30 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
Android面试宝典
2013/08/06 面试题
护理职业应聘自荐书
2013/09/29 职场文书
学期自我鉴定范文
2013/10/01 职场文书
个人担保书范文
2014/05/20 职场文书
总经理人事任命书
2014/06/05 职场文书
大学生在校表现评语
2014/12/31 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js