几句话带你理解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 相关文章推荐
图片之间的切换
Jun 26 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
javascript void(0)的妙用
Oct 21 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
React中的render何时执行过程
Apr 13 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
vue数据响应式原理知识点总结
Feb 16 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
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
jquery批量控制form禁用的代码
2013/08/06 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
深入理解javascript中的this
2021/02/08 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
python函数定义和调用过程详解
2020/02/09 Python
解决Django no such table: django_session的问题
2020/04/07 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python zip()函数的使用示例
2020/09/23 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
银行服务明星推荐材料
2014/05/29 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技