JS高级-***Function- ***OOP
1. ***Function
作用域(scope):
什么是: 一个变量的使用范围
为什么: 避免函数内外的变量间互相影响
包括: 2种:
1. 全局作用域: window
保存着全局变量: 随处可用,可反复使用
缺点: 不会被释放,造成全局污染和内存泄漏
2. 函数作用域: actived object
保存着局部变量: 仅函数内可用,不可重复使用
缺点: 不可重复使用
原理:
1. 程序开始执行前
创建执行环境栈ECS(Execute Context Stack)
ECS: 用于记录当前正在调用的函数
要调用函数时,函数进入ECS
函数调用后,会从ECS中弹出
调用浏览器的主程序main()——将main()加入ECS
main()会创建window对象,保存内置的对象和方法
只要浏览器不关闭,main()和window会始终存在
2. 定义函数时:
用函数名创建全局变量,保存在window中
创建函数对象,保存函数的定义
让函数名变量引用函数对象
函数对象的scope属性指回函数来自的作用域对象
3. 调用函数时:
函数调用的语句进入ECS
为本次函数调用创建函数作用域对象
在函数作用域对象中创建局部变量
让函数作用域对象的parent属性指向函数来自的作用域
变量的使用顺序: 就近
先局部,后全局
4. 函数调用后
ECS中本次函数调用的语句出栈
导致本次函数调用的函数作用域对象释放
导致局部变量一同释放!
作用域链(scope chain):
什么是: 由多级作用域对象,逐级引用形成的链式结构
作用: 保存所有变量, 控制着变量的使用顺序
*****闭包:
什么是: 即重用变量,又保护变量不被篡改的一种程序结构
为什么: 全局变量和局部变量都有缺点:
全局变量: 优: 可反复使用,随处可用
缺: 易被篡改,或造成内存泄露
局部变量: 优: 仅函数内可用,不会被篡改
缺: 不可重用
何时: 想即重用变量,又保护变量
如何: 3步:
1. 用外层函数包裹受保护的变量和内层函数
2. 外层函数将内层函数对象返回到外部
3. 使用者调用外层函数,获得内层函数对象
闭包如何形成: 外层函数的作用域对象无法释放
缺点: 1. 比普通函数多占用存储空间
2. 永远无法自动释放,导致内存泄露
解决: 一旦闭包不再使用,要将引用内层函数的全局变量赋值为null -> 导致内层函数释放-> 导致外层函数的AO释放
鄙视: 画简图:
1. 找受保护的变量:
2. 找外层函数抛出了几个内层函数对象
一次外层函数调用抛出的多个内层函数对象,共用同一个受保护的变量
2. ***OOP
什么是面向对象: 程序中,都是用对象结构,来描述现实中一个具体事物
什么是对象:
用途: 专门描述一个事物的属性和功能的程序结构
本质: 程序中保存一个事物的属性和功能的存储空间
为什么: 在保存大量数据时,便于维护
何时: 所有程序都使用面向对象形式
如何: 三大特点: 封装,继承,多态
1. 封装: 创建一个对象,保存一个事物的属性和功能
事物的属性会成为对象中的属性
事物的功能会成为对象中的方法
如何: 3种:
1. {}: var obj={
属性: 属性值,
... : ... ,
方法: function(){
... ...
}
}
访问对象中的成员(属性+方法)
访问属性: 对象.属性 用法和普通变量的用法一样
使用方法: 对象.方法() 用法和普通函数的用法一样
问题: 对象自己的方法,不能直接使用自己的属性名:
为什么: 默认情况,引擎不会自动进入对象中找属性,只能在作用域链中找普通的变量
不好的解决: 在方法中,属性名前写死对象名
问题: 如果对象名变化,则内部必须跟着变化,否则出错!
正确的解决: this
this: 函数中自动创建的,指向正在调用函数的.前的对象
总结: 今后对象自己的方法,要使用自己的属性,必须加this.
2. 用new: 2步:
var obj=new Object();
obj.属性名=值;
强调: js中的对象,可随时通过强行赋值的方式,添加新属性
揭示: 其实js中一切对象底层都是关联数组
访问对象成员: 对象.属性 对象["属性"]
特殊: 如果属性名来自于变量或动态生成
就只能用对象.[变量]
问题: 每次只能创建一个对象
解决: 用构造函数反复创建多个相同结构的对象
3. 用构造函数创建:
什么是: 描述一类对象统一结构的函数
为什么: 重用对象结构的定义
何时: 只要反复创建多个相同结构的对象时
如何: 2步:
1. 定义构造函数:
function 类型名(参数, 参数, ...){
this.属性名=参数;
this.属性名=参数;
... = ... ;
this.方法名=function(){
... this.属性名 ....
}
}
2. 调用构造函数创建新对象:
var obj=new 类型名(参数值, 参数值, ... )
new: 4件事:
1. 创建一个空对象
2. ?
3. 用新的空对象,调用构造函数
将this自动指向新对象
通过强行赋值的方式,给新的空对象添加新属性
4. 将新对象地址返还给obj
JS高级-***Function- ***OOP的更多相关文章
- JS高级——Function原型链
基本概念 1.函数可以通过Function new出来,那么Function可以被称作构造函数,被new出来的函数可以被称为一个对象 2.Function既然是构造函数,那么肯定也有原型,它的原型是一 ...
- JS高级——Function
Function构造函数 可以用来新建函数对象 1.一个参数都不传的情况创建的就是一个空的函数 2.只传一个参数的情况这个参数就是函数体 3.传多个参数的情况,最后一个参数为函数体,前面的参数都是该函 ...
- 读JS高级——第五章-引用类型 _记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- 不会JS中的OOP,你也太菜了吧!(第二篇)
一.你必须知道的 1> 原型及原型链在继承中起到了关键的作用.所以你一定要理解他们.2> 不会JS中的OOP,你也太菜了吧!(第一篇) 二.继承的6种方法 1> 原型链继承 原型链继 ...
- 《JS高级程序设计》笔记 —— 解析查询字符串
今天在继续翻阅<JS高级程序设计>的时候,正好翻到location对象这一小节,其中有一部分就是讲的解析查询字符串.看到这个内容立马想到了做去哪儿秋招笔试题的时候有这么一道题. 去哪儿笔试 ...
- js 高级函数 之示例
js 高级函数作用域安全构造函数 function Person(name, age) { this.name = name; this.age = age; ...
- 惰性函数——JS高级
我们先来看一下js的异步提交. XHR我们在原生的时候常常用到,因为常用到,我们更多把封装到了工具库中 先看下他最常用的实现 // 旧方法 function createXHR() { var xhr ...
- 《Node.js 高级编程》简介与第二章笔记
<Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...
- js高级-面向对象继承
一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...
随机推荐
- Django项目之客户
关于客户的操作 主页(被继承) {% load static %} <!DOCTYPE html> <html lang="en"> <head> ...
- python中matplotlib所绘制的图包含了很多的对象
上图中的top=‘off’意思是说顶部的grid lines 看不见. 去除frame,意思就是将这个矩形给去除掉,spine意思是脊柱 bars = plt.bar(pos, popularity, ...
- 单例&多线程
单例模式,最常见的就是饥饿模式,和懒汉模式,一个直接实例化对象,一个在调用方法时进行实例化对象.在多线程模式中,考虑到性能和线程安全问题,我们一般选择下面两种比较经典的单例模式,在性能提高的同时,又保 ...
- 微信小程序开发——导航失效的解决办法
异常描述: 使用 navigator 导航,各种属性配置没问题,就是点击死活不跳转. 异常分析: 遇到这种情况,要先考虑的就是当前配置的导航url,是不是已经使用在tabBar中,因为小程序对于nav ...
- 创建文件指针数组c++
#include<fstream>using namespace std; void main(){ for (int i=0; i<=1; i++) { char szName[1 ...
- Delphi: 获取控件文本宽度(像素)
为适应多语言,需要对界面控件大小.位置多动态改变,因此需要根据其Caption计算实际像素大小. 找资料未有易用现成的,遂参数其它方法,写以函数处之,代码如下: uses TypInfo; funct ...
- seek引发的python文件读写的问题
我的需求很简单,就是统计一下我的安装脚本执行的次数和时间,格式是这样的 install_times:1|install_times:2018-09-03 15:58:46 install_times: ...
- xml转Map,对象,Map转xml,inputs tram 转xml 字符串的工具类方法
众所周知,大家在微信开发工程中,由于微信开发文档中,对于消息的接收发送都是基础xml数据的(太坑了),所以我们需要对XML进行解析转换: 1.我们先引入所需要的依赖 dom4j (解析xml的),xs ...
- php libev扩展使用
在WorkerMan源码分析 - 实现最简单的原型文章中提到了libevent网络库,前者和libev都是事件驱动编程库高性能.简单说libev对libevent做了改进和精简.libevent使用全 ...
- win下apache的error.log和access.log文件过大
在httpd.conf中修改ErrorLog和CustomLog的配置 ErrorLog "|E:/apache2.2/bin/rotatelogs.exe E:/apache2.2/log ...