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)传递到函数中。

转载于:https://www.cnblogs.com/jwlLWJ2018/p/9247774.html

js+面向对象相关笔记(六)相关推荐

  1. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  2. JS学习笔记六:js中的DOM操作

    1. JS学习笔记六:js中的DOM操作 文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...

  3. Java学习笔记 六、面向对象编程中级部分

    Java学习笔记 六.面向对象编程中级部分 包 包的注意事项和使用细节 访问修饰符 访问修饰符的注意事项和使用细节 面向对象编程三大特征 封装 封装的实现步骤(三步) 继承 继承的细节问题 继承的本质 ...

  4. Java之GUI编程学习笔记六 —— AWT相关(画笔paint、鼠标监听事件、模拟画图工具)

    Java之GUI编程学习笔记六 -- AWT相关(画笔paint) 参考教程B站狂神https://www.bilibili.com/video/BV1DJ411B75F 了解paint Frame自 ...

  5. JS逆向学习笔记 - 持续更新中

    JS逆向学习笔记 寻找深圳爬虫工作,微信:cjh-18888 文章目录 JS逆向学习笔记 一. JS Hook 1. JS HOOK 原理和作用 原理:替换原来的方法. (好像写了句废话) 作用: 可 ...

  6. 一文读懂JS继承相关知识点

    一文读懂JS继承相关知识点 Javascript 面向对象编程(一):封装 一. 生成实例对象的原始模式 二. 原始模式的改进 三. 构造函数模式 四.构造函数模式的问题 五. Prototype模式 ...

  7. windows相关笔记

    windows相关笔记 前言 一. 彻底关闭windows10自动更新 二.开机启动批处理禁用win10更新服务 三.解决win和(linux或mac)双系统时间不同步问题 四.添加环境变量示例ope ...

  8. JS面向对象一:MVC的面向对象封装

    JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象 面向对象(Object-Oriented) 面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程. 面向对象的一 ...

  9. Node.js 框架设计及企业 Node.js 基础建设相关讨论

    大家好,我是若川.19年我写的 lodash源码 文章投稿到海镜大神知乎专栏竟然通过了,后来20年海镜大神还star了我的博客,同时还转发了我的微博.时间真快啊.今天分享这篇Node.js的讨论. 2 ...

最新文章

  1. wireshark提取流量包中的文件_从Wireshark监听的数据中提取需要的数据
  2. Windows存储串口数据至txt文件中的教程及代码
  3. java的标准注解和元注解
  4. python字典的键可以是列表吗_如何返回字典键作为Python中的列表?
  5. linux 限速命令,Linux下网卡限速
  6. vue-awesome-swiper:依赖于6.X版本Swiper时autoplay自动播放设置无效
  7. 微信小程序获取收货地址
  8. atitit.系统架构图 的设计 与工具 attilax总结
  9. Java程序设计基础笔记 • 【目录】
  10. Python 迷宫算法
  11. MySQL全文索引和like
  12. Redis(设计与实现):28---事件之文件事件(AE_READABLE事件、AE_WRITABLE事件)
  13. java coap_分布式项目(三)CoAp client and server
  14. SqLite 文件查看编辑工具
  15. matlab文件批量重命名并编号排序
  16. php围棋源码,腾讯围棋AI技术 PhoenixGo 正式开源,源码、模型全公开
  17. Lichee(三) Android4.0的目标产品目录与Lichee的纽带---extract-bsp
  18. 全球及中国数字每周可编程时间开关行业研究及十四五规划分析报告
  19. 计算机存储盘教程,内存盘(内存当虚拟硬盘)电脑提速Primo Ramdisk设置教程(详细)(图文)...
  20. android word转html标签,移动端html展示word文档转换方法

热门文章

  1. 离开HK后的第一篇所感--重生
  2. Spring容器创建流程——总结
  3. ubuntu启动脚本的一些笔记
  4. EXP-00011: XX.tab does not exist
  5. java配置opencv_在Windows中使用OpenCV Java与Eclipse
  6. 厦门one_厦门外代荣获ONE全球船舶操作中心颁发的Sapphire Award奖
  7. 95-910-140-源码-FlinkSQL-FlinkSQL简介
  8. 【kafka】Kafka 源码解析:Group 协调管理机制
  9. 【Elastischearch】Elastischearch 的 ID 生成器 UUIDGenerator
  10. 【Flink】解决 No ExecutorFactory found to execute the application