几句话带你理解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 相关文章推荐
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
JS获取当前时间戳方法解析
Aug 29 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 采集程序 常用函数
2008/12/18 PHP
PHP 事件机制(2)
2011/03/23 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php分页函数示例代码分享
2014/02/24 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python在控制台输出进度条的方法
2015/06/20 Python
python的keyword模块用法实例分析
2015/06/30 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
python爬取招聘要求等信息实例
2020/11/20 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
HTML5新标签兼容——> 的两种方法
2018/09/12 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
母婴店促销方案
2014/03/05 职场文书
怀念母亲教学反思
2014/04/28 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2016年党建工作简报
2015/11/26 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android