几句话带你理解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 相关文章推荐
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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
基于empty函数的输出详解
2013/06/17 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
javascript常用对话框小集
2013/09/13 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript中this详解
2015/09/01 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
python字典的值可以修改吗
2020/06/29 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
幼师自荐信范文
2013/10/06 职场文书
高一军训的心得体会
2014/09/01 职场文书
2014年教学工作总结
2014/11/13 职场文书
单位接收函范文
2015/01/30 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
困难补助申请报告
2015/05/19 职场文书