js+面向对象相关笔记（六）

1.绘制作用域链
◆先画0级作用域链
◆在全局作用域中查找，函数和变量的声明，然后将这些变量和函数，以小方块儿的形式放到0级作用域链上
◆从0级作用域中的函数引出1级作用域
◆再去每个1级作用域中查找变量和函数的声明，然后将这些变量和函数放到1级作用域链上
◆依次重复这样的步骤


2.线程：
◆js是单线程的，单线程表示一次只能够处理一个问题，多线程表示一次能够处理多个问题 
◆js中，分了三个线程，不是并行的【
◇一个线程执行渲染任务
◇一个线程执行js的代码执行任务
◇一个线程执行js的事件处理任务
】
◆js代码的执行顺序【
◇先把主任务（代码任务）执行完毕
◇再去执行次要的任务（包括setTimeOut和setInterval中的回调函数中的代码） 
】


3.匿名函数自调用的方式 
◆(function(){console.log(1);})();
◆+function(){console.log(1);}();
◆-function(){console.log(1);}();
◆*function(){console.log(1);}();
◆/function(){console.log(1);}();
◆%function(){console.log(1);}();


4.函数在调用的时候才会去开辟空间，函数每调用一次，就会去开辟一块儿保存自己数据的私有的空间。


5.计算机
◆软件：【
◇应用程序：qq、微信
◇操作系统：移动操作系统(安卓、ios、windowsPhone)、PC操作系统（linux、windows）
】
◆硬件系统：【
◇CPU
◇内存
◇硬盘
◇主板
◇输入输出设备(IO)
】


6.缓存：cache
◆缓存的作用，就是将一些常用的数据，存储起来，提供使用，提升性能
◆CDN：Content Delivery Network 内容分发网络
◆ 数据库高并发（同一时间内访问量特别高），非关系型数据库（内存型数据库） MongoDB Redis
◆网站静态页面缓存机制，将网页静态化，存储在服务器端。


7.斐波那契数列递归存在的性能问题与解决斐波那契数列的性能问题
◆普通的递归实现斐波那契【
function fib(n){
if(n<=2){
  return 1;
}
return fib(n-1)+fib(n-2);
}
】，函数调用的次数特别多，并且存在重复性的操作的调用问题，所以需要进行缓存处理。
◆使用缓存解决函数重复性的操作的调用问题【
var cache=[];
function fib(n) {
if(cache[n]!=undefined){
return cache[n];
}
if(n<=2) {
cache[n]=1;
return 1;
}
var temp=fib(n-1)+fib(n-2);
cache[n]=temp;
return temp;
}


】,会将相应的斐波那契数存起来，需要用的时候就返回，这样一来就不存在函数重复性的操作的调用的问题了，已经做过的步骤就不会再做了，但是如果缓存中的东西太多，也会造成内存泄漏。


8.jQuery缓存的实现
◆使用闭包加缓存的原理，很象属性的封装【
//定义一个创建缓存的方法
function createCache(){
//一个局部的缓存容器
var cache={};
//index数组中存储的是所有缓存对象的key，这个key是有顺序，用于缓存超过限制时对最早存入的对象进行移除操作
var index=[];
return function(key,value){
if(value!=undefined){
//将数据存入缓存对象
cache[key]=value;
//将缓存对象的键存入数组中
index.push(key);
//判断缓存中的数据数量是否超出了最大容量
if(index.length>50){
//如果超出了限制，就删除掉最早存储的缓存的数据，最早存入的缓存数据是在index数组的第一位
//shift方法可以获取并删除数组的第一个元素
var tempKey=index.shift();
//delete关键字可以删除 var 的变量 和对象的成员
delete cache[tempKey];
}
}
return cache[key];
}
}
var elementCache=createCache();
var ele=elementCache("ele01",element);
】


9.沙箱
◆与外界隔绝的一个环境，外界无法修改该环境内任何信息，沙箱内的东西单独一个世界。
◆360沙箱模式：将软件和操作系统进行隔离，以达到安全的目的。
◆IOS操作系统里面所有的程序都是在一个沙箱中运行的，苹果手机里的app使用的就是沙箱模式去运行的，隔离app的空间，每个app都是独立运行的。


10.JS中的沙箱模式
◆沙箱模式的基本模型【
(function(){
//在沙箱中将所有的变量的定义放到最上方
})();
】
◆沙箱模式用于隔离变量，保证外界的变量不会被内部的变量修改，保证内部的变量不会被外界修改
◆jQuery当中的沙箱模式【
(function(win){
var itcast={
getEle:function(){}
};
//将itcast对象赋值给window对象
win.itCast=win.$=itcast;
})(window);
//在外面就可以使用itCast或$符号了
$.getEle();
】,如果需要在外界暴露一些属性或者方法，就可以将这些属性和方法加到window全局对象上去，但是window全局对象不可以直接引用，因为直接引用会破坏沙箱原则，所以需要使用传参的形式将window对象传入沙箱内，此时沙箱内使用的window对象，不会再去全局搜索window对象，
 
而使用的就是沙箱内部定义的形参。
◆沙箱模式一般应用在书写第三方框架，或者为第三方框架书写插件，或者书写功能独立的一些组件。


11.沙箱模式的优势
◆沙箱模式使用的是IIFE，不会在外界暴露任何的全局变量，所以不会造成全局变量污染。
◆沙箱中所有的数据，都是和外界完全隔离的，所以就保证了代码的安全性。


12.js沙箱模式的实现原理
◆函数可以构建作用域，上级作用域不能直接访问下级作用域中的数据。


13.函数的四种调用模式
◆函数模式：this指向的是window全局对象【
function test(){
            console.log(this);
        }
        test();
】
◆方法模式：this指向调用这个方法的对象【
var obj1 = {
            test:function(){
                console.log(this);
            }
        }
        obj1.test();
】
◆构造函数模式：使用new创建出来的对象【
function Person(){
            console.log(this);
        }
        var obj =new Person();
】
◆上下文模式：apply和call这两个，可以使用appy和call来改变this，从而改变调用者，但是实际调用的还是原本对象的方法，很好用。


14.构造函数调用模式的特征
◆构造函数的首字母要大写
◆一般情况下和new关键字一起使用
◆构造函数中的this指定而是new关键字创建出来的对象
◆默认的返回new创建出来的这个对象，但是如果手动在方法中添加return语句，返回的数据如果是值类型的值，则还是返回new创建出来的这个对象，但是如果返回的是引用类型的值，则会返回这个引用类型的值，但是null除外，如果是null，则还是会返回new 创建出来的这个对象。
◆工厂模式的构造函数【
//1.工厂模式的构造函数
        function Person(name,age){
            var o = {
                name:name,
                age:age,
                sayHello:function(){


                }
            }
            return o;
        }


        var p = Person("张三", 18);
        console.log(p);
        //简单工厂模式的构造函数 创建出来的对象 跟该构造函数无关
        //简单工厂模式的构造函数，实际的调用模式是 函数模式
】
◆寄生式构造函数【
//2.寄生式构造函数
        function Person(name,age){
            var o = {
                name:name,
                age:age,
                sayHello:function(){


                }
            }
            return o;
        }
        var p = new Person();
//实际的调用模式还是 函数模式，对象的构造函数不是Person而是Object。
】


15.上下文
◆字面意思：上面的文字，下面的文字
◆JS中的上下文，context表示执行环境的意思
◆左值与右值，一般情况下，在等号左边的叫左值，在等号右边的叫右值，左值可以被赋值，右值不能被赋值，左值可以被修改，右值不能被修改，this就是右值【
function test(){
this=123;//不能够这样，因为this是右值，所以不能被赋值
}


function test2(){
var a=123;
return a;
}
test()=321;//不能够这样，因为test()也是一个右值，所以不能被赋值
】
◆虽然this是右值，但是在上下文调用模式中，可以修改this的值，也就是可以修改函数的调用方式，apply和call【
var name="尼古拉斯·老·舍";
function sayHello(){
console.log(this.name);
}
sayHello();//尼古拉斯·老·舍
var obj={
name:"尼古拉斯·不·舍"
}
sayHello.apply(obj);//使用appy来修改this，尼古拉斯·不·舍
sayHello.call(obj);//使用appy来修改this，尼古拉斯·不·舍
】


16.apply和call修改函数调用上下文
◆使用apply和call可以修改函数调用上下文，就是this的值
◆api文档中的语法语句中[] 代码括起来的东西可有可无。
◆apply：函数.apply(对象[,函数需要的参数列表，是一个数组]);
◆call：函数.call(对象[,arg1,arg2,arg3...argn]);
★apply和call的区别【
☆方法中的第一个参数都是要把this修改后的对象
☆当函数需要参数的时候，那么apply使用的是数组来进行参数传递，其实函数的形参都会封装到一个argumnes的伪数组中去，所以就算用数组来进行参数传递也是可以的，而且这么做很方便，只需要传递一个数组进去就可以了。
☆当函数需要参数的时候，那么call是使用单个单个的参数进行传递，所以不是很方便
☆【
var name="尼古拉斯·老·舍";
function sayHello(a,b){
console.log(this.name+"吃了"+(a+b)+"个包子！！！");
}
sayHello(1,2);//尼古拉斯·老·舍吃了3个包子
var obj={
name:"尼古拉斯·不·舍"
}
//第一个参数要修改的this的对象，后面的数组，就是额外要传递的参数
sayHello.apply(obj,[10,15]);//尼古拉斯·老·舍吃了25个包子
//第一个参数要修改的this的对象，后面的参数，就是额外要传递的参数
sayHello.call(obj,15,25);//尼古拉斯·老·舍吃了40个包子
】
】


17.求一个数组的中的最大值，使用上下文调用模式来实现【
var arr=[9,2,8,3,4,6,12,35,7];
//使用apply方法的第二个参数
var maxValue=Math.max.apply(null,arr);
console.log(maxValue);//35
】,apply方法的第二个参数是一个数组，在调用的时候，会将数组中的每一个元素拿出来，作为形式参数，挨个传递给函数


18.将传入的参数使用-相互连接，使用上下文调用模式来实现【
function foo(){
 return Array.prototype.join.call(arguments,"-");//Array.prototype可以改成[]，因为数组对象是可以直接调用数组原型对象中的方法
// return Array.prototype.join.apply(arguments,["-"]);
}
var str=foo(1,3,"abc","ffff",99);
console.log(str);//1-3-abc-ffff-99
】


19.将伪装装到一个真数组中，使用上下文调用模式来实现【
var divs=document.getElementsByTagName("div");
var arr=[];
arr.push.apply(arr,divs);//这样就将伪数组中的元素一个一个的添加到新数组中了。
】，apply方法的第二个参数的特性，在调用的时候会将第二个参数的数组，拆分成每一个元素以(a,b,c,d,e,f,g)传递到函数中。