几句话带你理解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 浮动广告实现代码
Dec 25 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
面包屑导航详解
Dec 07 Javascript
详解javascript中的Error对象
Apr 25 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
模拟flock实现文件锁定
2007/02/14 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python文本数据相似度的度量
2018/03/12 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
详解Python实现进度条的4种方式
2020/01/15 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
个人对照检查材料
2014/02/12 职场文书
班级文化标语
2014/06/23 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python