JS 11

1. *****作用域和作用域链

2. *****闭包

1. *****作用域和作用域链

作用域scope:

什么是: 一个变量的使用范围——使用

本质上作用域是一个对象——存储

作用域中的变量都是对象的成员

程序/函数的执行过程:

1. 开始执行程序前:

创建ECS(执行环境栈):

依次保存每个调用的函数的执行环境

在ECS中压入第一个全局执行环境(全局EC)

创建window对象,全局EC引用window对象

window就是全局作用域对象

2. 开始执行程序:

所有全局变量都保存在全局作用域对象window中

3. 定义函数时:

在全局添加函数名变量

创建函数对象封装函数定义

函数名变量引用函数对象

函数对象中有一个scope属性,引用回创建函数时的作用域对象。通常都是window。

4. 调用函数时:

在ECS中压入一个新的EC

为本次函数调用创建专门的活动对象(AO)

在AO中创建所有函数定义中规定的局部变量

其实AO就是函数作用域对象

所有局部变量都是AO的成员

新的EC引用活动对象AO

AO的parent指向window

变量的使用顺序:

先用AO(函数作用域)中的局部变量

如果AO中没有,才去window(全局作用域)中找

5. 函数调用后:

本次函数调用的EC出栈

导致函数作用域对象AO释放

导致局部变量一同释放

作用域链(scope chain): 由多个作用域对象连续引用形成的链式结构。

顺序: 先函数作用域对象AO->全局作用域对象window

所有的变量都保存在作用域链上的对象中

局部变量都保存在函数作用域对象AO中

全局变量都保存在全局作用域对象window中

控制了: 变量的使用顺序

先用AO(函数作用域)中的局部变量

如果AO中没有,才去window(全局作用域)中找

闭包:

什么是: 即重用变量,又防止变量被污染的一种机制

为什么: 全局变量: 优: 可重用     缺: 易被全局污染

局部变量: 优: 不会被污染    缺: 不可重用

何时: 即重用变量,又防止变量被污染

如何: 3步:

1. 用外层函数包裹住受保护的变量和操作变量的内层函数

2. 外层函数将内层函数返回到外部,被外部的变量保存

3. 通过外部变量调用内层函数,访问受保护的变量

缺: 1. 占用更多内存: 外层函数的AO

2. 容易造成内存泄漏

三特点: 1. 函数嵌套:

2. 外层函数包含一个受保护的局部变量

3. 外层函数将内层函数对象返回

1. *****面向对象OOP:

什么是: 程序中都是先用对象来定义数据和功能,再按照逻辑的需要,访问对象中的数据和功能。

为什么: 和现实中人的想法非常接近。

什么是对象: 内存中同时存储多个数据和功能的存储空间

描述现实中一个具体事物的属性和功能的程序结构

事物的属性,会成为对象中的属性

事物的功能,会成为对象中的方法

何时: 今后开始写程序前,都要先用对象,描述好要操作的事物的属性和功能,再按需使用对象的功能,访问对象的属性

如何: 面向对象三大特点: 封装,继承,多态

封装: 将一个具体事物的属性和功能集中定义在一个对象中

创建自定义对象: ——封装   3种:

1. 使用对象直接量:

var obj={

属性名: 属性值,

... : ... ,

方法名: function(){... this.属性名 ...},

... : ... ,

}

强调: 对象自己的方法,要访问自己的属性,必须用this.属性名.

this->正在调用函数的当前对象自己

2. 使用new: 2步:

var obj=new Object(); //创建一个空对象

//向空对象中添加属性和方法

obj.属性名=属性值;

obj.方法名=function(){...this.属性名...};

对象的本质: js中一切对象的底层都是关联数组

每个属性/方法都是关联数组中的元素

属性名/方法名是key,属性值/函数对象是value

问题: 一次只能创建一个对象

3. 解决: 用构造函数:

什么是构造函数: 专门描述一类对象统一结构的函数

何时: 今后只要反复创建多个相同结构的对象时,都要先定义构造函数

为什么: 复用对象的结构代码

如何: 2步:

1. 定义构造函数

function 类型名(属性参数列表){

this.属性名=属性参数值;

...=...;

this.方法名=function(){ ... this.属性名 ...  }

}

2. 用new调用构造函数,创建并装修新对象

var obj=new 类型名(属性值列表);

创建一个指定“类型”的对象

用new调用指定"类型"的构造函数来创建对象

new: 4件事:

1. 创建新的空对象

2. 让新对象继承构造函数的原型对象

3. 用新对象去调用构造函数

向新对象中添加构造函数规定的属性

将属性参数的值,保存到新对象的新属性中

向新对象中添加构造函数规定的方法

4. 将新对象的地址保存在变量

按需访问对象的属性,调用对象的方法:

访问对象的属性: obj.属性名   用法和普通的变量完全一样

属性就是保存在对象中的一个变量

调用对象的方法: obj.方法名() 用法和普通的函数完全一样

强调: 方法中的this,默认指.前的对象

构造函数的问题: 只能复用代码,不能节约内存

继承: 父对象的成员,子对象不用重复创建,也可直接使用

为什么: 即节约内存,又代码重用

何时: 只要一类子对象,需要相同的属性或功能时,都要将相同的属性和功能仅在父对象中定义一次即可

如何:

原型对象: 集中存储同一类型的子对象所需的所有共有属性和方法的父对象

时间: 2024-10-25 02:01:00

JS 11的相关文章

node.js 11 Web框架Express 介绍,安装,静态页面,路由

本文参考原文-http://bjbsair.com/2020-03-22/tech-info/2815/前面介绍了node.js的文件模块,http server以及静态网站的创建.有了这些知识作为基础,我们可以了解一下node.js的Web框架了. 从Java一路过来的朋友可能觉得Web框架还是比较重量级的,比如最初的Struts到后来的Spring,中间Apache组织也有过一些其他的模板框架,总体而言无论是从使用还是学习来讲,都是需要花费较多时间的.对于大型应用而言,这个投入是值得的.如果

Vue.js 实战教程 V2.x(11)事件处理

11事件处理 11.1监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </di

“高三”笔记之动态JS、动态样式

拜读<JavaScript高级程序设计> --- 站在巨人的肩上 动态JS.动态样式就是页面加载时不存在,但将来通过DOM操作动态添加的脚本:包括加载外部文件和添加内部代码块两种:动态加载的外部文件能够立即运行,而动态添加的代码块却不能如愿的立即执行:下面将主要以JS为例,小小的探索下动态脚本的加载.执行以及jQuery的做法.Angularjs的相关做法: 1.动态加载外部文件 因为动态加载的外部JS会立即执行,也没什么浏览器兼容性问题,这个好处理:这里的重点是怎么知道脚本已加载完成呢?呵呵

Node.js进程通信模块child_process

前言 Node.js是一种单线程的编程模型,对Node.js的赞美和诟病的也都是因为它的单线程模型,所有的任务都在一个线程中完成(I/O等例外).单线程模型,不仅让代码非常简洁,更是直接避免了线程调度的复杂性:同样也是因为单线程,让CPU密集型计算应用,完全不适用. 在Node.js的内核中,给了我们一种新的选择,通过child_process模块创建新进程,从而实现多核并行计算. 目录 child_process介绍 child_process的基本使用:spawn, exec, execFi

动态加载js、css 代码

一.原生js: 1 /** 2 * 加载js和css文件 3 * @param jsonData.path 前缀路径 4 * @param jsonData.url 需要加载的js路径或css路径 5 * @param jsonData.type 需要加载的类型 js或css 6 */ 7 function loadWriteFiles(jsonData) 8 { 9 jsonData.path = jsonData.path != undefined ? jsonData.path : "&q

通过WebViewJavascriptBridge实现OC与JS交互

在.m方法当中,申明一个WebViewJavascriptBridge属性: 1 @interface ExampleAppViewController () 2 @property WebViewJavascriptBridge* bridge; 3 @end 4 5 @implementation ExampleAppViewController 6 7 8 - (void)viewDidLoad { 9 10 11 UIWebView* webView = [[UIWebView allo

nodejs学习笔记Node.js 调试命令

3.4  调试        47 下面是一个简单的例子: $ node debug debug.js < debugger listening on port 5858 connecting... ok break in /home/byvoid/debug.js:11 var a = 1; 2 var b = 'world'; 3 var c = function (x) { debug> n break in /home/byvoid/debug.js:21 var a = 1; 2 v

锋利的js之验证身份证号

我们在做互联网网站时,注册个人资料时,经常要用到身份证号,我们需要对身份证进验证,不然别人随便输个号码就通过,让你感觉这个网站做得很shit. 身份证号是有规则的. 结构和形式 1.号码的结构  公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码.  2.地址码  表示编码对象常住户口所在县(市.旗.区)的行政区划代码,按GB/T2260的规定执行.  3.出生日期码  表示编码对象出生的年.月

Node.js处理I/O数据之Buffer模块缓冲数据

一.前传 在之前做web时也经常用到js对象转json和json转js对象.既然是Node.js处理I/O数据,也把这个记下来. Json转Js对象:JSON.parse(jsonstr); //可以将json字符串转换成json对象 Js对象转Json:JSON.stringify(jsonobj); //可以将json对象转换成json对符串 var jsonStr='{"name":"cuiyanwei","sex":"男&quo