Js高级单利模式理论模型

方便更好的的理解单利模式，如下题

 var n = 2;var obj = {n: 3,fn: (function (n) {n*= 2;this.n += 2;var n = 5;return function (m) {this.n*= 2;console.log(m + (++n));}})(n)//obj.n会报错};var fn = obj.fn;fn(3);obj.fn(3);console.log(n, obj.n);

如图所示下面的思路

首先会形成一个全局作用域，变量提升： var一个 n var一个 obj var一个 fn 提升后代码自上而下执行全局下 n=2；obj （引用类型）首先开辟一个堆内存（假设叫aaafff000），存值n:3 fn等于自执行函数返回值，自执行函数执行，假设形成叫AA的私有作用域，自执行函数执行时fn还没有赋完值，fn堆内存里面东西没有存完，堆内存当中东西没存完，就和obj就没有关系，自执行函数执行时此时 obj是undefined.

自执行函数执行第一步形参赋值 n=2,（这里的N 是全局变量的值），变量提升 var n，在当前私有作用域AA中，当前变量已经声明，不重复声明。重新赋值 n*=2 （此时私有的n=4）this.n+=2 (自执行函数 this指window 也就是全局下的n ) 此时全局下的n=4；下来var n=5 让私有的n=5， return一个函数在AA中开辟一个堆内存（假设叫bbbfff111），把返回函数的 this.n*= 2;console.log(m + (++n));当字符串存储起来，即 return bbbfff111 bbbfff111属于AA aaafff000中的fn通过AA指向bbbfff111，存fn自执行函数执行形成一个不销毁的私有作用域AA，不销毁作用域AA中有一个不销毁的变量n（5），并且返回了一个全新的堆内存给obj对象 fn的属性名(fn:bbbfff111) 堆内存（aaafff000中 fn）存值存储完成，把堆内存的地址赋值给 obj 此时obj和aaafff000建立联系（obj=aaafff000），

fn=obj.fn fn执行 fn(3) fn=bbbfff111 形参赋值（m=3）this.n*=2 this指window （4*2）此时全局下的n=8

3+(++n) 此时n是上级作用域 AA （5） ++5 =6 n=6 3+6 输出9

obj.fn(3)

obj.fn m=3 this.n*=2 此时this指 obj obj的n是3 3*2=6 3+（++n） n 上级作用域n就是AA ++6 n=7 3+7 输出10

console.log(n, obj.n); 全局下的n =8 obj.n=6

Js高级单利模式理论模型相关推荐

js高级04-- 沙箱模式、函数的4种调用模式（call()、apply()）、构造函数的return关键字
沙箱: <script>//沙箱//与外界隔绝的一个环境,外界无法修改该环境内任何信息,沙箱内的东西单独属于一个世界//360沙箱模式//将软件和操作系统进行隔离,以达到安全的目的//苹果 ...
前端与移动开发----JS高级----面向对象编程，类与实例对象，继承，严格模式，模板字符串，class封装tab栏
JS高级01 回顾上阶段 Javascript组成 ECMAScript: 基础语法 (变量, 表达式, 循环, 判断, 函数, 对象等) DOM: document 操作标签(获取, 增加, 插入, ...
前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
设计模式----单利模式
设计模式介绍设计模式是经过总结.优化的,对我们经常会碰到的一些编程问题的可重用解决方案.一个设计模式并不像一个类或一个库那样能够直接作用于我们的代码.反之,设计模式更为高级,它是一种必须在特定情形下 ...
js高级程序设计第四部分
js高级程序设计:BOM.客户端检测 BOM window对象在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 ...
js高级：面向对象+ES6
js高级:面向对象+ES6 文章目录 js高级:面向对象+ES6 day01 一.ES6中的类和对象 1.1对象 1.2类 1.3创建类 1.4类constructor构造函数 1.5类中添加方法 1 ...
前端复习8：JS高级
前端复习8:JS高级 1.对象 1.1 面向过程与面向对象 1.2 对象与类 2 构造函数和原型 2.1 构造函数 2.2 构造原型prototype 2.2 对象原型 2.3 constructor ...
JS高级+ES678
js高级数据类型基本(值)类型 Number: 任意数值 String: 任意文本 Boolean: true/false undefined: undefined null: null 对象(引 ...
JS高级之JavaScript简介
JS高级系列是对JavaScript高级程序设计的总结. 一.基本概念 1.最早的JavaScript版本: Netscape公司的Netscape Navigator中的JavaScript 微软的 ...

Js高级单利模式理论模型

Js高级单利模式理论模型相关推荐

最新文章

热门文章