几句话就能让你理解:this、闭包、原型链
以下是个人对这三个老大难的总结(最近一直在学习原生JS,翻了不少书,不少文档,虽然还是新手,但我会继续坚持走我自己的路)
原型链
所有对象都是基于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判断
- 由new调用?绑定到新创建的空对象;
- 由
call、apply、bind
调用?绑定到指定的参数对象;如foo.call(obj)
- 由上下文对象调用?绑定到这个上下文对象;如
obj.foo()
- 默认情况下绑定到全局对象,
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(); }
几句话就能让你理解:this、闭包、原型链的更多相关文章
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- 玩转JavaScript OOP[3]——彻底理解继承和原型链
概述 上一篇我们介绍了通过构造函数和原型可以实现JavaScript中的“类”,由于构造函数和函数的原型都是对象,所以JavaScript的“类”本质上也是对象.这一篇我们将介绍JavaScript中 ...
- 彻底理解什么是原型链,prototype和__proto__的区别以及es5中的继承
再讲一遍好了( 参考https://blog.csdn.net/cc18868876837/article/details/81211729 https://blog.csdn.net/lc23742 ...
- 怎么理解js的原型链继承?
前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...
- 理解JavaScript的原型链
1. 什么是对象 在JavaScript中,对象是属性的无序集合,每个属性存放一个原始值.对象或函数. 1.1 创建对象 在JavaScript中创建对象的两种方法: ① 字面上: var myObj ...
- js原型和原型链理解到面向对象
一.js中的两种对象,普通对象和函数对象 var obj1 = {}; var obj2 =new Object(); var obj3 = new obj1(); function fun1(){} ...
- javascript系列--认识并理解构造函数,原型和原型链
一.前言 介绍构造函数,原型,原型链.比如说经常会被问道:symbol是不是构造函数:constructor属性是否只读:prototype.[[Prototype]]和__proto__的区别:什么 ...
- #error#优化#Model#理解下面这句话错误所导致的错误:"传入一个对象,那么你就拥有了对象的属性"2
CHENYILONG Blog #error#优化#Model#理解下面这句话错误所导致的错误:"传入一个对象,那么你就拥有了对象的属性"2 © chenyilong. Power ...
- 正确理解Widget::Widget(QWidget *parent) :QWidget(parent)这句话(初始化列表中无法直接初始化基类的数据成员,所以你需要在列表中指定基类的构造函数)
最近有点忙,先发一篇我公众号的文章,以下是原文. /********原文********/ 最近很多学习Qt的小伙伴在我的微信公众号私信我,该如何理解下面段代码的第二行QWidget(parent) ...
随机推荐
- Mysql - 函数
Mysql提供的函数是在是太多了, 很多我都见过, 别说用了. 园子里面, 有人弄了一个比较全的. MYSQL函数 我这里会将他写的完全拷贝下来, 中间会插入一些自己项目中使用过的心得 一.数学函数 ...
- 烂泥:jira7.2安装、中文及破解
. jira的主要配置文件,存放在/opt/atlassian/jira/conf/server.xml文件中,如下: vim /opt/atlassian/jira/conf/server.xml ...
- TCP通信
//网络套接字编程实例,服务器端,TCP通信. #include <WinSock2.h> #pragma comment(lib,"ws2_32.lib") #inc ...
- logstash服务启动脚本
logstash服务启动脚本 最近在弄ELK,发现logstash没有sysv类型的服务启动脚本,于是按照网上一个老外提供的模板自己进行修改 #添加用户 useradd logstash -M -s ...
- 自己开发实现OAuth做webapi认证
看到园子里面有人写的OAuth,就想把自己实现的OAuth也分享一下,关于OAuth协议这里就不再赘述. 一.作为认证服务器,首先需要提供一个可以通过appid/appsecret来获取token这样 ...
- C#委托使用详解(Delegates)
摘要 委托是C#编程一个非常重要的概念,也是一个难点.本文将系统详细讲解委托. 1. 委托是什么? 其实,我一直思考如何讲解委托,才能把委托说得更透彻.说实话,每个人都委托都有不同的见解,因为看问题的 ...
- Html5 快速排序演示
快速排序(Quicksort)是对冒泡排序的一种改进.快速排序由C. A. R. Hoare在1962年提出. 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另 ...
- .Net开源工作流Roadflow的使用与集成
序言 最近公司要整理公司内部oa系统,需要使用到工作流,所以就开始了开源工作流挑选,使用,到集成到公司内部系统的工作. 首先在网上搜了文档,自己也有补充,整理啦国内几款工作流的比较,由于没有个个击破式 ...
- 已经重写,源码和文章请跳转http://www.cnblogs.com/ymnets/p/5621706.html
文章由于写得比较仓促 已经重写,源码和文章请跳转 http://www.cnblogs.com/ymnets/p/5621706.html 系列目录 前言: 导入导出实在多例子,很多成熟的组建都分装了 ...
- 通过IEnumerable和IDisposable实现可暂停和取消的任务队列
一般来说,软件中总会有一些长时间的操作,这类操作包括下载文件,转储数据库,或者处理复杂的运算. 一种处理做法是,在主界面上提示正在操作中,有进度条,其他部分不可用.这里带来很大的问题, 使用者不知道到 ...