几句话带你理解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 append() html时的小问题的解决方法
Dec 16 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
理解javascript闭包
Dec 15 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 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
一个简单计数器的源代码
2006/10/09 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
Laravel 队列使用的实现
2019/01/08 PHP
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
关于Python作用域自学总结
2019/06/10 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python实现简单的购物程序代码实例
2020/03/03 Python
python制作微博图片爬取工具
2021/01/16 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
金秋助学感谢信
2015/01/21 职场文书
建议书格式
2015/02/04 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫