几句话就能让你理解: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) ...
随机推荐
- Linux-Rhel6 恢复误删文件
需要工具extundelete(可通过xshell上传下载到linux)知识点:ifconifig eth0 查看ipfdisk /dev/sda 管理磁盘m ...
- Struts2日期类型转换
针对日期类java.util.Date进行类型转换,要求客户端使用"yyyy-MM-dd","yyyy/MM/dd"中的任意一种输入,并以"yyyy- ...
- [PHP源码阅读]strtolower和strtoupper函数
字符串的操作函数中,字符串的大小写转换也算是比较常用的函数,其底层实现也比较简单,下面来一探究竟. 我在github上有对PHP源码更详细的注解.感兴趣的可以围观一下,给个star.PHP5.4源码注 ...
- 带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
- Leetcode 笔记 110 - Balanced Binary Tree
题目链接:Balanced Binary Tree | LeetCode OJ Given a binary tree, determine if it is height-balanced. For ...
- Java垃圾回收
垃圾收集算法 引用计数 堆中的每个对象都有一个引用计数,当对象被引用时引用计数加1,当对象的引用被重新赋值或超出有效区域时引用计数减1,当一个对象被回收后,它所引用的对象的引用计算减1.当一个对象的引 ...
- Java回调方法详解
回调在维基百科中定义为: 在计算机程序设计中,回调函数,是指通过函数参数传递到其他代码的,某一块可执行代码的引用. 其目的是允许底层代码调用在高层定义的子程序. 举个例子可能更明白一些:以Androi ...
- 阿里云本地FTP怎么连接?通用win7,win8,win8.1,win10
- 【WPF】闲着没事,写了个支持数据列表分页的帮助类
支持分页的MVVM组件大家可以网上找,老周这个类只是没事写来娱乐一下的,主要是功能简单,轻量级,至少它满足了我的需求,也许还有未知的 bug . 这个类支持对数据列表进行分页处理,原理是利用 Skip ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...