几句话带你理解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 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
Javascript函数的参数
Jul 16 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
vue.js 实现a标签href里添加参数
Nov 12 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
深入理解node.js之path模块
2017/05/03 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
CentOS6.5设置Django开发环境
2016/10/13 Python
Django中url的反向查询的方法
2018/03/14 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python剪切视频与合并视频的实现
2020/03/03 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
市场营销毕业生自荐信范文
2014/04/01 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
建筑工地标语
2014/06/18 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书