几句话带你理解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 相关文章推荐
js模拟点击事件实现代码
Nov 06 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
写的htc的数据表格
2007/01/20 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vuex存储token示例
2019/11/11 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python 图片去噪的方法示例
2019/07/09 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python异常触发及自定义异常类解析
2019/08/06 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
delegate与普通函数的区别
2014/01/22 面试题
市场调查策划方案
2014/06/10 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
关键在于落实心得体会
2014/09/03 职场文书
培训督导岗位职责
2015/04/10 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL