首先先复习一下内存
var str1 = "abc";
var str2 = "abc";
console.log(str1 == str2)
console.log(str1 === str2)
// 上面的代码实际上是执行了这个操作
// var str = String("abc")
AI 代码解读
// 那么如果
var str1 = String("abc");
var str2 = new String("abc");
console.log(str1 == str2)
console.log(str1 === str2)
// 我们可以在控制台输出一下 str1 和 str2,一看就知道为什么不一样了。
AI 代码解读
我们可以得到结论:
-
==
比较的是变量(对象)的值 -
===
比较的是变量(对象)的地址 - 以后不管什么编程语言,只要看到
new
关键字,一定是在堆中开辟一块新内存
浏览器解析 HTML
模板和实例
<div id="myDiv"></div>
AI 代码解读
var myDiv = document.getElementById("myDiv");
AI 代码解读
- 浏览器把 HTML 一对对标签解析下来后,全部存放到内存空间,并互相指向,形成所谓的 DOM 树
- 可以用
typeof mydiv
的方式查看 - 如果是
Object
那就一定是存放在堆空间的,其他存放在常量池。 - 这个
myDiv
实际上是div
标签的实例 - 可以用
myDiv.constructor
的方法看这个实例到底是哪个实例类
那么能不能用 new HTMLDivElement()
new 一个新的 HTMLDiv 类呢?
不管对错,先猜猜看。
实际操作一遍发现浏览器报错了,浏览器不允许你私自 new 一个 HTMLDiv 类
那么该如何 new 出一个 HTMLDiv 类呢?
--------------------------------------我是分割线--------------------------------------
浏览器提供了这么一个方法 document.createElement("div")
,通过这种方式,它能够在内存中创建一个 DOM 对象,并且是 HTMLDivElement 的对象。
var myDiv1 = document.createElement("div");
AI 代码解读
这是一个典型的工厂模式。
我们可以发现 myDiv.constructor
和 myDiv1.constructor
一模一样,这就说明,这两个是同样一个模板下所产生的不同的实例
但是问题来了,我希望我的模板下有且只有一个实例,节约内存,例如 body
标签,全局唯一,这个时候该怎么设计?
--------------------------------------我是引导君--------------------------------------
JavaScript 有一个特性,就是动态对象可以随意复制其行为和属性。
大家来说出自己的理解。
不要着急,我先继续往下讲。
var obj = {};
// 这就是一个简单的单例,同时也是 Object 的一个实例,我们可以在这里面扩展任何我们想要的属性
// 例如 var Obj = {name: "abc",age: 1}
AI 代码解读
这段代码在我们项目代码里非常普遍,但是这样的实例,也是单例模式,有个不好的地方,那就是,这个单例根本无法扩展,而且使用起来也非常不安全,因为我们可以随时改变这个里面的内容。
--------------------------------------我是不正经的正题君--------------------------------------
那么,单例模式在 JavaScript 中该如何设计呢?
(function(){})()
// 熟悉我的写法的人肯定知道
// 这段代码是创建一个匿名函数,并且立即调用
// 那么这么写到底有什么用呢?
AI 代码解读
这种写法是有用的,它帮我实现了一个闭包,这段代码的 {}
中帮我实现了一个闭包临时作用域。
var SingleTest = (function(){
// 这个 return 的 function 就是刚刚说的模板类
return function(){
console.log("进入构造器函数");
}
})()
// 这个时候我们就可以
var i1 = new SingleTest();
var i2 = new SingleTest();
console.log(i1===i2) // false
AI 代码解读
大家注意,有基础的应该都知道,函数在 JavaScript 里面有两种使用方式,一种是函数调用(小写),另一种是构造器(大写),行业潜规则。
但是我希望不管我怎么 new ,我都想使用内存中的同一块地址,也就是i1===i2
,那么该怎么做呢?
var SingleTest = (function(){
var _instance = null;
return function(){
console.log("进入构造器函数");
if (!_instance) {
console.log("第一次 new,局部变量(实例)_instance 为 null");
_instance = this;
return _instance;
} else {
console.log("不是第一次 new,局部变量(实例)_instance 不为 null,直接返回");
return _instance;
}
}
})()
AI 代码解读
大家先理解理解这段代码。
this
代表的是当前创建的这块内存空间的引用,所以定义的属性或者方法都可以用 this
来操作。
这个时候 console.log(i1===i2)
看看会发生什么。
--------------------------------------我是不正经的参数君--------------------------------------
如果我要给这个单例传一个参数,我们要访问实例里面的 name 属性怎么办?
var SingleTest = (function(){
var _instance = null;
return function(ops){
// 我们经常会这么做
// 通过这种方式我们可以过滤掉不传参数带来的空引用问题
ops = ops || {};
if (!_instance) {
_instance = this;
// 通过 for 循环,遍历迭代我们的参数
for (var prop in ops) {
_instance[prop] = ops[prop];
}
return _instance;
} else {
for (var prop in ops) {
_instance[prop] = ops[prop];
}
return _instance;
}
}
})()
var i1 = new SingleTest({name:"zhangsan"});
var i2 = new SingleTest({name:"lisi"});
console.log(i1.name);
// 那么输出的值是多少呢?
// 很明显上面写了两个 for 循环,我们代码里也经常有这种情况发生,这个时候该怎么优化?
AI 代码解读
var SingleTest = (function(){
var _instance = null;
var _default = {}
// 封装 for 循环
function _init(ops) {
for (var prop in ops) {
this[prop] = ops[prop];
}
}
return function(ops=_default){// es6支持
// ops = ops || {}; 这种方式已经 out 了
if (!_instance) {
_instance = this;
_init.call(_instance, ops);
} else {
_init.call(_instance, ops);
}
return _instance;
}
})()
var i1 = new SingleTest({name:"zhangsan"});
var i2 = new SingleTest({name:"lisi"});
console.log(i1.name);
AI 代码解读
这个代码已经优化度很高了,但是还可以进行优化,比如说,如果我这里面不止 _init
方法,还有其他方法,例如,function _method1(){}
function _method2(){}
等,在函数体内进行调用的时候,你会发现,这么设计并不是一个好主意。
那么,有多个方法的时候该如何进行优化呢?
--------------------------------------我是正经的优化君--------------------------------------
简单来说,就是将这些方法加到原型链中。
var SingleTest = (function(){
var _instance = null;
var _default = {}
function SingleInstance(ops=_default){
if (!_instance) {
_instance = this;
this._init(ops);
} else {
_instance._init(ops);
}
return _instance;
}
// 将方法加到原型中去
// _的意思是,私有属性或方法,行业规则。
SingleInstance.prototype._init = function(ops) {
for (var prop in ops) {
this[prop] = ops[prop];
}
}
return SingleInstance;
})()
var i1 = new SingleTest({name:"zhangsan"});
var i2 = new SingleTest({name:"lisi"});
console.log(i1.name);
AI 代码解读
你会发现,这样做代码量并没有减少多少,但是优点是,在写入其他方法的时候,可以用 this
直接相互调用已存在的方法。
还有一个优点是,如果后期想 new
出不同的实例,直接对 _instance
做处理就好了,因为我已经把这个单例打包成了闭包,不会影响外面的调用者。
但是这样还有一个 bug !
那就是如果有些人不上规矩,想直接调用 SingleTest({name:"mazi"})
,这个时候你会发现,控制台报错了。
那么该如何优化,让这种调用也兼容呢?
--------------------------------------我是万恶的bug君--------------------------------------
原因就是,这样做是直接调用这个函数堆栈,这就意味着,当前函数的作用域并不是堆里面的 this
。
不要问我函数堆栈是什么,这个不是主题,简单来说就是把函数拿到栈里面去执行。
奔主题。
var SingleTest = (function(){
var _instance = null;
var _default = {}
function SingleInstance(ops=_default){
// instanceof 是表示 this 是不是 SingleInstance 的实例
if (this instanceof SingleInstance) {
if (!_instance) {
_instance = this;
this._init(ops);
} else {
_instance._init(ops);
}
} else {
if (!_instance) {
_instance = new SingleInstance();
_instance._init(ops);
} else {
_instance._init(ops);
}
}
return _instance;
}
SingleInstance.prototype._init = function(ops) {
for (var prop in ops) {
this[prop] = ops[prop];
}
}
return SingleInstance;
})()
var i0 = SingleTest({name:"wangwu"})
var i1 = new SingleTest({name:"zhangsan"});
var i2 = new SingleTest({name:"lisi"});
console.log(i0 === i1);
console.log(i0 === i2);
AI 代码解读
至此,这个单例已经优化完毕。
或许还可以继续优化,但是这个不重要了,讲到这足够了。
我想说的是,你们不要记代码,没用的,试着去理解我的思路,思路是通用的。