几句话带你理解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闭包
Dec 14 Javascript
javascript event 事件解析
Jan 31 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
js之ajax文件上传
May 13 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
学院领导推荐信
2013/10/30 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python