几句话带你理解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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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/02/02 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
2017/02/02 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
Python脚本实现网卡流量监控
2015/02/14 Python
python读取和保存图片5种方法对比
2018/09/12 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
租房协议书怎么写
2014/04/10 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python