几句话带你理解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 19 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
Vue组件开发初探
Feb 14 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
JavaScript中的相等操作符使用详解
Dec 21 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
Js apply方法详解
2017/02/16 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
在Python下尝试多线程编程
2015/04/28 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python gdal安装与简单使用
2019/08/01 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
中西医专业毕业生职业规划书
2014/02/24 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
会计简历自我评价
2015/03/10 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers