几句话带你理解JS中的this、闭包、原型链

 更新时间:2016年09月26日 09:48:09   作者:苏福  
在javascript前端开发阶段经常会遇到this,闭包,原型链知识,那么大家对这三种的基本知识理解吗?今天小编就带领大家一起学习this,闭包,原型链的知识,感兴趣的朋友一起看看吧

原型链

所有对象都是基于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(); }

相关文章

  • js完美实现@提到好友特效(兼容各大浏览器)

    js完美实现@提到好友特效(兼容各大浏览器)

    本文给大家分享的是一则使用javascript完美实现兼容各大浏览器的@好友自动提示的特效,是根据百度贴吧的效果模仿来的,推荐给小伙伴们,希望大家能够喜欢。
    2015-03-03
  • JavaScript笛卡尔积超简单实现算法示例

    JavaScript笛卡尔积超简单实现算法示例

    这篇文章主要介绍了JavaScript笛卡尔积超简单实现算法,涉及javascript数组遍历、添加简单操作技巧,需要的朋友可以参考下
    2018-07-07
  • JavaScript提高加载和执行效率的方法

    JavaScript提高加载和执行效率的方法

    JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂,也就是说当浏览器在执行JavaScript代码时,不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码,从而提高其在浏览器中的性能。
    2017-02-02
  • Javascript 圆角div的实现代码

    Javascript 圆角div的实现代码

    为什么要做圆角的div: 圆角div平滑美观,某些情况下有比较不错的效果。比如说要做一个报message的消息框,那么动态的生成一个圆角div则很有意义。而对html样式控制的css本身是不直接支持圆角div的。
    2009-10-10
  • javascript之Partial Application学习

    javascript之Partial Application学习

    在数学中,一个函数是描述每个输入值对应唯一输出值的这种对应关系,符号为 f(x)。例如,表达式 f(x)=x2表示了一个函数 f,其中每个输入值x都与唯一输出值x2相联系
    2013-01-01
  • js中的布尔运算符使用介绍

    js中的布尔运算符使用介绍

    布尔运算符 && 和 || 的时候,我说过它们的结果是布尔值,它们也能用于计算其他的类型的数据,这种时候,返回的就将是其中的一个参数了
    2013-11-11
  • JS获取DropDownList的value值与text值的示例代码

    JS获取DropDownList的value值与text值的示例代码

    本篇文章主要是对JS获取DropDownList的value值与text值的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 使用JS的input框实现音频文件的上传与播放功能

    使用JS的input框实现音频文件的上传与播放功能

    最近的系统加的功能是越来越多了,前两天老板又让实现一个录音上传的功能,可以点击播放按钮打开音频播放器,点击暂停按钮暂定播放,想了想决定使用input框的file类型加上接收的参数为audio来实现此功能,感兴趣的朋友可以参考下
    2024-06-06
  • JS值当前DIV的ID值的代码

    JS值当前DIV的ID值的代码

    JS值当前DIV的ID值的代码...
    2007-05-05
  • 从JQuery源码分析JavaScript函数的apply方法与call方法

    从JQuery源码分析JavaScript函数的apply方法与call方法

    这篇文章主要介绍了从JQuery源码分析JavaScript函数的apply方法与call方法,本文结合JQuery源码和js高级程序设计再次探究apply方法与call方法,需要的朋友可以参考下
    2014-09-09

最新评论