几句话带你理解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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
关于js datetime的那点事
Nov 15 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 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的FTP学习(四)
2006/10/09 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
Python实现聊天机器人的示例代码
2018/07/09 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python解析多层json操作示例
2019/12/30 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
老师对学生的评语
2014/04/18 职场文书
活动总结报告怎么写
2014/07/03 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
董事长岗位职责
2015/02/13 职场文书
卡特教练观后感
2015/06/08 职场文书
《角的度量》教学反思
2016/02/18 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏