广宁县住房建设局网站,免费企业信息发布平台,网站建设服务平台,沈阳注册公司目录 一、深入基础
1.1数据类型
1.分类#xff1a;
2.判断#xff1a;
3.undefined与null的区别#xff1f;
4.严格区别变量类型与数据类型#xff1f;
1.2数据变量与内存
1.什么是数据#xff1f;
2.什么是内存#xff1f;
3.什么是变量#xff1f;
4.内存
2.判断
3.undefined与null的区别
4.严格区别变量类型与数据类型
1.2数据变量与内存
1.什么是数据
2.什么是内存
3.什么是变量
4.内存数据变量三者之间的关系
5.var a xxx; a内存中到底保存的是什么
6.关于引用变量的赋值问题
7.在js调用函数时传递变量参数时是值传递还是引用传递
8.js引擎如何管理内存
1.3对象
1.什么是对象
2.为什么用对象
3.对象的组成
4.如何访问对象内部的数据
5.什么时候使用 [“属性名”] 这种方式
1.4函数
1.什么是函数
2.如何定义函数
3.如何调用函数
4.回调函数
1.5 IIFE
1.6函数中的this
1.this是什么
2.如何确定this的值
二、函数高级
2.1原型与原型链
2.1.1原型prototype
2.1.2显示原型与隐式原型
2.1.3原型链
2.1.4原型链属性问题
2.1.5探索instanceof 2.1.6原型面试题
2.2执行上下文与执行上下文栈
2.2.1变量提升与函数提升
2.2.2执行上下文
2.2.3执行上下文栈
2.2.4执行上下文2
2.2.5面试题
2.3作用域与作用域链
2.3.1作用域
2.3.2作用域与执行上下文
2.3.3作用域链
2.3.4作用域面试题
2.4闭包
2.4.1理解闭包
2.4.2常见的闭包
2.4.3闭包的作用
2.4.4闭包的生命周期
2.4.5闭包的应用_自定义JS模块
2.4.6闭包的缺点及解决
2.4.7内存溢出与内存泄漏
2.4.8闭包面试题
三、对象高级
3.1对象的创建模式
3.1.1Object构造函数模式
3.1.2对象字面量模式
3.1.3工厂模式
3.1.4自定义构造函数模式
3.1.5构造函数原型组合模式
3.2继承模式
3.2.1原型链继承
3.2.2借用构造函数继承
3.2.3组合继承
四、线程机制与事件机制
4.1进程与线程
4.2定时器引发的思考
4.3JS是单线程的
4.4事件循环模型
4.5Web Workers 一、深入基础
1.1数据类型
1.分类
-基本类型 -String:任意字符串 -Number:任意的数字 -boolean: true/false -undefined:未定义 -null:空
-引用对象类型 -Object:任意对象 -Function一种特别的对象可以执行 -Array一种特别的对象数值下标内部数据是有序的
2.判断
-typeof 可以判断undefined、数值、字符串、布尔值 不能判断: null与object object与arrayinstanceof可以判断对象的具体类型 可以判断undefined、null
3.undefined与null的区别
* undefined表示定义未赋值 * null表示赋值了值为null 什么时候给变量赋值为null * 初始赋值表明将要赋值为对象 * 结束前让对象成为垃圾对象被垃圾回收器回收
4.严格区别变量类型与数据类型
* 数据的类型 - 基本类型 - 对象类型 * 变量的类型变量内存值的类型 -基本类型保存就是基本类型的数据 -引用类型保存的是地址值
1.2数据变量与内存
1.什么是数据
-存储在内存中代表特定的信息本质上是010101… -数据的特点可传递、可运算 -内存中所有操作的目标数据 逻辑运算 算数运算 赋值 运行函数
2.什么是内存
-内存条通电后产生的可储存数据的空间临时的 -内存产生和死亡内存条通电产生内存空间存储数据处理对象断电内存空间和数据消失 -一小块内存的2个数据 -内部存储的数据 -地址值
-内存分类 -栈存储全局变量、局部变量 -堆存储对象
3.什么是变量
-可变化的的量又变量名和变量值组成 -每个变量都对应的一小块内存变量名用来查找对应的内存变量值就是内存中保存的数据
4.内存数据变量三者之间的关系
-内存用来存储数据 -变量是内存的标识
5.var a xxx; a内存中到底保存的是什么
- xxx 是基本数据保存的就是这个数据 - xxx 是对象保存的是对象的地址值 - xxx 是一个变量保存的xxx的内存内容可能是基本数据也可能是地址值
6.关于引用变量的赋值问题
2个引用变量指向同一个对象通过一个变量修改对象内部数据另一个变量看到的是修改之后的数据。
2个引用变量指向同一个对象让其中一个引用变量指向另一个对象另一个引用变量依然指向前一个对象。
scriptvar obj1 {name:tom};var obj2 obj1;obj2.name bob;console.log(obj1.name); //bobfunction fun(obj){obj.name TIMI;};fun(obj1);console.log(obj2.name); //TIMIvar a {age:12};var b a;a {name:mike,age:13};b.age 14;console.log(b.age,a.name,a.age); //14,mike,13function fun2(obj){obj {age:15};};fun2(a);console.log(a.age); //13/script7.在js调用函数时传递变量参数时是值传递还是引用传递
- 理解1都是值基本/地址值传递 - 理解2可能是值传递也可能是引用传递地址值 scriptvar a 3;function fun1(a){a a1;};fun1(a);console.log(a);//3function fun2(obj){console.log(obj.name);};var obj {name:tom};fun2(obj);/script8.js引擎如何管理内存
1.内存生命周期 - 分配小内存空间得到它的使用权 - 储存数据可以反复进行操作 - 释放小内存空间
2.释放内存 -局部变量函数执行完自动释放 对象成为垃圾对象–垃圾回收器回收 1.3对象
1.什么是对象
- 多个数据的封装体 - 用来保存多个数据的容器 - 一个对象代表现实中的一个事物
2.为什么用对象
- 统一管理多个数据 3.对象的组成
- 属性:属性名字符串和属性值任意组成 - 方法一种特别的属性属性值是函数
4.如何访问对象内部的数据
- .属性名 编码简单有时不能用 - [“属性名”]: 编码麻烦能通用
5.什么时候使用 [“属性名”] 这种方式
- 属性名包含特殊字符- 空格等 - 属性名不确定 scriptvar p {};// 1.给对象p添加一个属性content-type:text/json// p.content-type text/json; 不能用p[content-type] text/json;console.log(p[content-type]);// 2.属性名不确定var propName myAge;var value 18;// p.propName value; 不能用p[propName] value;console.log(p[propName]);/script1.4函数 1.什么是函数
实现特定功能的n条语句的封装体 只有函数是可以执行的其他类型的数据不能执行
2.如何定义函数
函数声明 表达式
3.如何调用函数
test(); 函数名(); 直接调用 obj.test(); 通过对象调用 new test(); new调用 test.call/apply(obj); 临时让test成为obj的方法进行调用
4.回调函数
什么是回调函数 1.自己定义的 2.没有调用 3.最终执行了在某个时刻或某个条件下
常见的回调函数 1.dom事件回调函数 2.定时器的回调函数 3.ajax请求回调函数 4.生命周期回调函数
bodybutton idbtn01回调/buttonscriptvar btn01 document.getElementById(btn01);btn01.onclick function(){alert(this.innerHTML);};// 定时器setTimeout(function(){alert(到点了);},2000);/script
/body1.5 IIFE
IIFE 全称Immediately-Invoked Function Expression 立即调用函数表达式别名匿名函数自调用。
作用 - 隐藏内部实现 -不会干扰到外部全局命名空间 -用它来编码js模块
script(function(){ //匿名函数自调用var a 3;console.log(a3);})();var a 4;console.log(a);(function(){var a 1;function test(){console.log(a);}window.$ function(){ //向外暴露一个全局函数return{test:test}};})();$().test(); //$是一个函数//$执行后返回的是一个对象/script1.6函数中的this
1.this是什么
- 在任何函数本质上都是通过某个对象来调用的如果没有直接指定就是window - 所有函数内部都有一个变量this - 它的值是调用函数的当前对象
2.如何确定this的值
- test(); window - p.test(); p - new test(); 新创建的对象 - p.call(obj); obj
script typetext/javascriptfunction Person(color) {console.log(this)this.color color;this.getColor function () {console.log(this)return this.color;};this.setColor function (color) {console.log(this)this.color color;};}Person(red); //this是谁? windowvar p new Person(yello); //this是谁? pp.getColor(); //this是谁? pvar obj {};p.setColor.call(obj, black); //this是谁? objvar test p.setColor;test(); //this是谁? windowfunction fun1() {function fun2() {console.log(this);}fun2(); //this是谁? window}fun1();/script二、函数高级
2.1原型与原型链
2.1.1原型prototype
1.函数的prototype属性 - 每个函数都有一个prototype属性它默认指向一个Object空对象即为原型对象 - 原型对象中有一个属性constructor它指向函数对象
2.给原型对象添加属性一般都是方法 - 作用函数的所有实例对象自动拥有原型中的属性方法 script// 每个函数都有一个prototype属性它默认指向一个Object空对象即为原型对象console.log(Date.prototype,typeof Date.prototype);function Fun(){} console.log(Fun.prototype);//默认指向一个Object空对象没有我们的属性// 原型对象中有一个属性constructor它指向函数对象console.log(Date.prototype.constructorDate);console.log(Fun.prototype.constructorFun);// 给原型对象添加属性一般是方法-- 实例对象可以访问Fun.prototype.test function(){console.log(test());}var fun new Fun();fun.test();/script2.1.2显示原型与隐式原型 1.每个函数function都有一个prototype即显示原型属性 2.每个实例对象都有一个__proto__,可称为隐式原型属性 3.对象的隐式原型的值为其对应构造函数的显示原型的值 4.总结 - 函数的prototype属性在定义函数时自动添加的默认值是一个空Object对象 - 对象的__proto__属性创建对象时自动添加的默认值为构造函数的prototype属性值 - 能直接操作显示原型但不能直接操作隐式原型ES6之前 script// 定义构造函数function Fn(){// 内部语句this.prototype {}}// 1.每个函数function都有一个prototype即为显示原型属性默认指向一个空的Object对象console.log(Fn.prototype);// 2.每个实例对象都有一个__protp__,可称为隐式原型// 创建实例对象var fn new Fn();// 内部语句:this.__proto__ Fn.prototypeconsole.log(fn.__proto__); // 3.对象的隐式原型的值为其对应构造函数的显示原型的值console.log(Fn.prototype fn.__proto__); //true// 给原型对象添加方法Fn.prototype.test function(){console.log(test());}// 通过实例调用原型的方法fn.test(); /script显示原型与隐式原型的内存结构图 2.1.3原型链
原型链别名隐式原型链 访问一个对象属性时先在自身属性中查找找到返回,如果没有再沿着__proto__这条链向上查找找到返回,如果最终没有找到则返回undefined
作用 1.查找对象的属性方法 2.构造函数/原型/实体对象的关系图解 3.构造函数/原型/实体对象的关系2图解 script// console.log(Object);// console.log(Object.prototype);console.log(Object.prototype.__proto__);function Fn(){this.test1 function(){console.log(test1());};}console.log(Fn.prototype);Fn.prototype.test2 function(){console.log(test2());};var fn new Fn();fn.test1();fn.test2();console.log(fn.toString());console.log(fn.test3);// fn.test3();/* 1.函数的显示原型指向的对象默认是空Object实例对象但Object不满足 */console.log(Fn.prototype instanceof Object); //trueconsole.log(Object.prototype instanceof Object); //falseconsole.log(Function.prototype instanceof Object); //true/* 2.所有函数都是Function的实例包含Function */console.log(Function.__proto__ Function.prototype);/* Object的原型对象是原型链的尽头 */console.log(Object.prototype.__proto__); //null/script原型链图解 2.1.4原型链属性问题
1.读取对象的属性值时会自动到原型链中查找 2.设置对象的属性值时不会查找原型链如果当前对象中没有此属性直接添加此属性并设置其值 3.方法一般定义在原型中属性一般通过构造函数定义在对象本身上 scriptfunction Fn(){}Fn.prototype.a xxx;var fn1 new Fn();console.log(fn1.a,fn1);var fn2 new Fn();fn2.a yyy;console.log(fn1.a,fn2.a,fn2);function Person(name,age){this.name name;this.age age;}Person.prototype.setName function(name){this.name name;};var p1 new Person(Tom,12);p1.setName(libai);var p2 new Person(jack,12);p2.setName(nice);console.log(p1);console.log(p2);console.log(p1.__proto__ p2.__proto__); //true/script 2.1.5探索instanceof
1.instanceof是如何判断的 表达式A instanceof B 如果B函数的显示原型对象在A对象的原型链上返回true否则返回false
2.Function是通过new自己产生的实例 script/* 案例1 */function Foo(){}var f1 new Foo();console.log(f1 instanceof Foo); //trueconsole.log(f1 instanceof Object); //true/* 案例2 */console.log(Object instanceof Function); //trueconsole.log(Object instanceof Object); //trueconsole.log(Function instanceof Function); //trueconsole.log(Function instanceof Object); //truefunction Foo(){};console.log(Object instanceof Foo); //false/script2.1.6原型面试题
script/* 测试题1*/function A(){}A.prototype.n 1;var b new A();A.prototype {n:2,m:3};var c new A();console.log(b.n,b.m,c.n,c.m); //1 undefined 2 3/* 测试题2 */function F(){}Object.prototype.a function(){console.log(a());}; Function.prototype.b function(){console.log(b());};var f new F();f.a();// f.b(); 不能执行F.a(); F.b();console.log(f);console.log(Object.prototype);console.log(Function.prototype);/script2.2执行上下文与执行上下文栈
2.2.1变量提升与函数提升
1.变量的声明提升 通过var定义声明的变量在定义语句之前就可以访问到值为undefined 2.函数声明提升 通过function声明的函数在之前就可以直接调用值为函数定义对象 3.问题变量提升和函数提升是如何产生的
script/* 面试题 */// 输出a的值var a 3;function fn(){console.log(a);var a 4;}fn(); //aundefinedconsole.log(b); //undefined 变量提升fn2(); //可调用 函数提升// fn3(); 不能调用变量提升var b 3;function fn2(){console.log(fn2());}var fn3 function(){console.log(fn3());};/script2.2.2执行上下文
1.代码分类位置 - 全局代码 - 函数局部代码
2.全局执行上下文 - 在执行全局代码前将window确定为全局执行上下文 - 对全局数据进行预处理 * var 定义的全局变量–undefined,添加为window的属性 * function声明的全局函数–赋值fun添加为window的方法 * this–赋值window - 开始执行全局代码
3.函数执行上下文 - 在调用函数准备执行函数体之前创建对应的函数执行上下文对象虚拟的存在于栈中 - 对局部数据进行预处理 * 形参变量–赋值实参–添加为执行上下文的属性 * arguments–赋值实参列表添加为执行上下文属性 * var 定义的局部变量–undefined添加为执行上下文的属性 * function声明的函数–赋值fun添加为执行上下文的方法 * this–赋值调用函数的对象
- 开始执行函数体代码
script/* 全局执行上下文 */console.log(a1,window.a1); //undefined,undefineda2(); //a2()console.log(this); //windowvar a1 3;function a2(){console.log(a2());}console.log(a1); //3console.log();/* 函数执行上下文 */function fn(a1){console.log(a1);console.log(a2);a3();console.log(this);console.log(arguments); //伪数组23var a2 3;function a3(){console.log(a3());}}fn(2,3); //2,undefined,a3(),window/script2.2.3执行上下文栈
1.在全局代码执行前js引擎就会创建一个栈来存储管理所有的执行上下文对象 2.在全局执行上下文window确定后将其添加到栈中压栈 3.在函数执行上下文创建后将其添加到栈中压栈 4.在当前函数执行完后将栈顶的对象移除出栈 5.当所有的代码执行完之后栈中只剩下window
scriptvar a 10;var bar function(x){var b 5;foo(xb);};var foo function(y){var c 5;console.log(acy);};bar(10); //30/script2.2.4执行上下文2 script/* 1.以下代码依次输出什么gb:undefinedfb:1fb:2fb:3fe:3fe:2fe:1ge:12.整个过程中产生了几次执行上下文5次*/console.log(gb:i);var i 1;foo(1);function foo(i){if(i4){return;}console.log(fb:i);foo(i 1); //递归调用console.log(fe:i);}console.log(ge:i);/script2.2.5面试题 script/* 测试题1 先执行变量提升再执行函数提升 */function a(){}var a;console.log(typeof a); //function/* 测试题2 */if(!(b in window)){var b 1;}console.log(b); //undefined/* 测试题3 */var c 1;function c(c){console.log(c);var c 3;}c(2); //报错c不是函数/script2.3作用域与作用域链
2.3.1作用域
1.理解 - 指一块空间代码所在的区域 - 它是静态的相对于上下文对象在编写代码时就确定了
2.分类 - 全局作用域 - 函数作用域 - 没有块作用域ES6开始有了
3.作用 - 隔离变量不同作用域下同名变量不会有冲突
script// 没有块作用域/* if(true){var c 3;}console.log(c);*/var a 10;var b 20;function fn(x){var a 100;c 300;console.log(fn(),a,b,c,x);function bar(x){var a 1000;var d 400;console.log(bar(),a,b,c,d,x);}bar(100);bar(200);}fn(10);/script2.3.2作用域与执行上下文
作用域与执行上下文的区别: 区别1 - 全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了,而不是在函数调用时, - 全局执行上下文环境是在全局作用域确定之后,js代码马上执行之前创建 - 函数执行上下文是在调用函数时,函数体代码执行之前创建
区别2 - 作用域是静态的,只要函数定义好了就一直存在,且不会再变化 - 执行上下文是动态的,调用函数时创建,函数调用结束时就会自动释放
联系 - 上下文环境(对象)是从属于所在的作用域 - 全局上下文环境–全局作用域 - 函数上下文环境–对应的函数作用域
scriptvar a 10;var b 20;function fn(x){var a 100;c 300;console.log(fn(),a,b,c,x);function bar(x){var a 1000;var d 400;console.log(bar(),a,b,c,d,x);}bar(100);bar(200);}fn(10);/script2.3.3作用域链
1.理解 - 多个上下级关系的作用域形成的链,它的方向是从下向上的(从内到外) - 查找变量时就是沿着作用域链来查找的
2.查找一个变量的查找规则 - 在当前作用域下的执行上下文中查找对应的属性,如果有直接返回,否则进入2 - 在上一级作用域的执行上下文中查找对应的属性,如果有直接返回,否则进入3 - 再次执行2的相同操作,知道全局作用域,如果还找不到就抛出找不到的异常
script/* 作用域链 */var a 1;function fn1(){var b 2;function fn2(){var c 3;console.log(c);console.log(b);console.log(a);console.log(d); //d未定义,会报错}fn2();}fn1();/script2.3.4作用域面试题
scriptvar x 10;function fn(){console.log(x);}function show(f){var x 20;f();}show(fn); //10// fn的作用域没有x,只能从外部的作用域去找console.log();var fn function(){console.log(fn); };fn();var obj {fn2:function(){console.log(fn2); //会报错,fn2未被定义// console.log(this.fn2); 想要输出该作用域的fn2,须在前面加this.}};obj.fn2();/script2.4闭包
2.4.1理解闭包
1.如何产生闭包 当一个嵌套的内部子函数引用了嵌套的外部父函数的变量函数时就产生了闭包。
2.闭包到底是什么 理解一闭包是嵌套的内部函数 理解二包含被引用变量函数的对象 注闭包存在于嵌套的内部函数中
3.产生闭包的条件 函数嵌套 内部函数引用了外部函数的数据变量/函数
scriptfunction fn1(){var a 2;var b abc;function fn2(){ //执行函数定义就会产生闭包不用调用内部函数console.log(a);}fn2();}fn1();/script2.4.2常见的闭包
1.将函数作为另一个函数的返回值 2.将函数作为实参传递给另一个函数调用
script// 1.将函数作为另一个函数的返回值function fn1(){var a 2;function fn2(){a;console.log(a);}return fn2;}var f fn1();f(); //3f(); //4// 2.将函数作为实参传递给另一个函数调用function showDelay(msg,time){setTimeout(function(){alert(msg);},time);}showDelay(学 习,2000);/script2.4.3闭包的作用
闭包的作用 1.使用函数内部的变量在函数执行完后仍然存活在内存中延长了局部变量的生命周期 2.让函数外部可以操作读写到函数内部的数据变量/函数
问题 1.函数执行完后函数内部声明的局部变量是否还存在 一般是不存在的存在于闭包的变量才可能存在
2.在函数外部能直接访问函数内部的局部变量么 不能但我们可以通过闭包让外部操作它
scriptfunction fn1(){var a 2;function fn2(){a;console.log(a);}function fn3(){a--;console.log(a);}return fn3;}var f fn1();f(); //1f(); //0/script2.4.4闭包的生命周期
1.产生在嵌套内部函数定义执行完时就产生了不是在调用 2.死亡在嵌套的内部函数成为垃圾对象时
scriptfunction fn1(){// 此时闭包就已经产生了函数提升内部函数对象已经创建了var a 2;function fn2(){a;console.log(a);}return fn2;}var f fn1();f(); //3f(); //4f null; //闭包死亡包含闭包的函数对象成为垃圾对象/script2.4.5闭包的应用_自定义JS模块
闭包的应用自定义JS模块 - 具有特定功能的js文件 - 将所有的数据和功能都封装在一个函数内部私有的 - 只向外暴露一个包执行n个方法的对象或函数 - 模块的使用者只需要通过模块暴露的对象调用方法来实现对应的功能
script srcmyModule2.js/scriptscriptmyModule2.doSomething();myModule2.doOtherthing();/scriptmyModule2.js
(function(){// 私有数据var msg My Class;// 操作数据的函数function doSomething(){console.log(doSomething()msg.toUpperCase());}function doOtherthing(){console.log(doOtherthing()msg.toLowerCase());}// 向外暴露对象给外部使用的方法window.myModule2 {doSomething:doSomething,doOtherthing:doOtherthing}
})()2.4.6闭包的缺点及解决
1.缺点 - 函数执行完后函数内的局部变量没有释放占用内存时间会变长 - 容易造成内存泄漏
2.解决 - 能不用闭包就不用 - 及时释放
scriptfunction fn1(){var arr new Array[100000];function fn2(){console.log(arr.length);}return fn2;}var f fn1();f();f null; //让内部函数成为垃圾对象--回收闭包/script2.4.7内存溢出与内存泄漏 1.内存溢出 - 一种程序运行出现的错误 - 当程序运行需要的内存超过了剩余内存时就会抛出内存溢出的错误
2.内存泄漏 - 占用的内存没有及视释放 - 内存泄漏积累的多了就容易导致内存溢出
常见的内存泄漏 * 意外的全局变量 * 没有及时清理的计时器或回调函数 * 闭包
script// 内存溢出var obj {};for(var i 0;i10000;i){obj[i] new Array(1000000);console.log(-----);}// 内存泄漏// 意外的全局变量function fn(){a new Array(1000000);console.log(a);}fn();// 没有及时清理的计时器或回调函数var start setInterval(function(){ //启动定时器后不清理console.log(---);},2000);// 清理定时器clearInterval(start);// 闭包function fn1(){var a 4;function fn2(){console.log(a);}return fn2;}var f fn1();f();// f null; /script2.4.8闭包面试题
script/* 以下代码输出的是什么 */// 代码片段一var name The Window;var object {name:My Object,getNameFunc:function(){return function(){return this.name;};}};alert(object.getNameFunc()()); // the window// 函数嵌套但是内部函数没有调用外部函数的变量不是闭包// 代码片段二var name2 The Window;var object2 {name2:My Object,getNameFunc:function(){var that this;return function(){return that.name2;};}};alert(object2.getNameFunc()()); //My Object// 函数嵌套内部函数调用了外部函数的that是闭包/scriptscriptfunction fun(n,o){console.log(o);return{fun:function(m){return fun(m,n);}}} var a fun(0);a.fun(1);a.fun(2);a.fun(3); // undefined,0,0,0 var b fun(0).fun(1).fun(2).fun(3); //undefined,0,1,2var c fun(0).fun(1);c.fun(2);c.fun(3); //undefined,0,1,1/script三、对象高级
3.1对象的创建模式
3.1.1Object构造函数模式
方式一Object构造函数模式 - 套路先创建空Object对象再动态添加属性/方法 - 使用场景起始时不确定对象内部数据 - 问题代码量多
scriptvar p new Object();p.name tom;p.age 12;p.setName function(name){this.name name;};// 测试p.setName(李白);console.log(p.name,p.age);/script3.1.2对象字面量模式
方式二对象字面量模式 - 套路使用{}创建对象同时指定属性和方法 - 适用场景起始时对象内部数据时确定的 - 问题如果创建多个对象有重复代码
scriptvar p {name:tom,age:16,setName:function(name){this.name name;}};// 测试console.log(p.name,p.age);p.setName(Jack);console.log(p.name,p.age);/script3.1.3工厂模式
方式三 工厂模式 - 套路通过工厂函数动态创建对象并返回 - 适用场景需要创建多个对象 - 问题对象没有一个具体的类型都是Object类型
scriptfunction createPerson(age,name){ //返回一个对象的函数--工厂函数 var obj {age:age,name:name,setName:function(){this.name name;}};return obj;}var p1 createPerson(16,张三);var p2 createPerson(16,李三);console.log(p1);console.log(p2);function createCat(age,name){var obj {age:age,name:name,setName:function(){this.name name;}};return obj;}var c1 createCat(15,波斯猫)var c2 createCat(15,野猫)console.log(c1);console.log(c2);/script3.1.4自定义构造函数模式
方式四自定义构造函数模式 套路自定义构造函数通过new创建对象 适用场景需要创建多个类型确定的对象 问题每个对象都有相同的数据浪费内存
script// 定义类型function Person(name,age){this.name name;this.age age;this.setName function(){this.name name;};}var p1 new Person(lisa,16);p1.setName(bob);console.log(p1.name,p1.age);console.log(p1 instanceof Person);function Student(name,price){this.name name;this.price price;this.setName function(){this.name name;};}var s new Student(熊大,1000);console.log(s instanceof Student);var p2 new Person(Jack,16);console.log(p1,p2)/script3.1.5构造函数原型组合模式
方式五构造函数原型组合 套路自定义构造函数属性在函数中初始化方法添加到原型上 适用场景需要创建多个类型确定的对象
scriptfunction Person(name,age){this.name name;this.age age;}Person.prototype.setName function(name){this.name name;};var p1 new Person(tom,16);var p2 new Person(bob,19);console.log(p1,p2);/script3.2继承模式 3.2.1原型链继承
原型链继承方式一 套路 1.定义父类型的构造函数 2.给父类型的原型添加方法 3.定义子类型的构造函数 4.创建父类型的对象赋值给子类型的原型 5.将子类型原型的构造属性设置为子类型 6.给子类型原型添加方法 7.创建子类型的对象可以调用父类型的方法
关键 - 子类型的原型为父类型的一个实例对象
script// 父类型function Supper(){this.supProp Supper property;}Supper.prototype.showSupperProp function(){console.log(this.supProp);}// 子类型function Sub(){this.subProp Sub property;}// 子类型的原型为父类型的一个实例对象Sub.prototype new Supper();// 让子类型的原型的constructor指向子类型Sub.prototype.constructor Sub;Sub.prototype.showSubProp function(){console.log(this.subProp);}var sub new Sub();sub.showSupperProp();sub.showSubProp();console.log(sub); //Sub/script3.2.2借用构造函数继承
方式二借用构造函数继承假的 1.套路 - 定义父类型的构造函数 - 定义子类型的构造函数 - 在子类型构造函数中调用父类型构造
2.关键 - 在子类型构造函数中通用call()调用父类型构造函数
scriptfunction Person(name,age){this.name name;this.age age;}function Student(name,age,price){Person.call(this,name,age); //相当于this.Person(name,age)/* this.name name;this.age age; */this.price price;}var s new Student(tom,20,14000);console.log(s.name,s.age,s.price);/script3.2.3组合继承
方式三原型链借用构造函数的组合继承 1.利用原型链实现对父类型对象的方法继承 2.利用call借用父类型构造函数初始化相同属性
scriptfunction Person(name,age){this.name name;this.age age;}Person.prototype.setName function(name){this.name name;};function Student(name,age,price){Person.call(this,name,age); //为了得到属性this.price price;}Student.prototype new Person(); //为了能看到父类型的方法Student.prototype.constructor Student; //修正constructor属性Student.prototype.setPrice function(price ){this.price price;};var s new Student(tom,24,15000);s.setName(bob);s.setPrice(16000);console.log(s.name,s.age,s.price); /script四、线程机制与事件机制 4.1进程与线程
进程程序的一次执行它占有一片独有的内存空间可以通过windows任务管理器查看进程 - 多进程运行一应用程序可以同时启动多个实例运行
线程是进程内的一个独立执行单元试程序执行的一个完整流程是CPU的最小调度单元
多线程在一个进程内同时有多个线程运行 优点 1.有效提升CPU的利用率 缺点 1.创建多线程开销 2.线程间切换开销 3.死锁与状态同步问题
单线程 优点顺序编程简单易懂 缺点效率低
相关知识 - 应用程序必须运行在某个进程的某个路线上 - 一个进程中至少有一个运行的线程主线程进程启动后自动创建 - 一个进程中也可以同时运行多个线程我们会说程序是多线程运行的 - 一个进程内的数据可以供其中的多个线程直接共享 - 多个进程之间的数据是不能直接共享的 - 线程池保存多个线程对象的容器实现线程对象的反复利用
4.2定时器引发的思考 1.定时器真的是定时执行的么 - 定时器并不能保证真正定时执行 - 一般会延迟一点也有可能延迟很长时间
2.定时器回调函数是在分线程执行的吗 - 在主线程执行的js是单线程的
3.定时器是如何实现的 事件循环模型 button idbtn启动定时器/buttonscriptdocument.getElementById(btn).onclick function(){var start Date.now();console.log(启动定时器前);setTimeout(function(){console.log(定时器执行了,Date.now()-start);},200);}console.log(定时器启动后);// 做一个长时间的工作for(var i 0;i1000000000;i){}/script4.3JS是单线程的
1.如何证明js执行是单线程的 - setTimeout()的回调函数是在主线程执行的 - 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
2.为什么js要用单线程模式而不是用多线程模式 - JavaScript的单线程与它的用途有关 - 作为浏览器脚本语言JavaScript的主要用途是与用户互动以及操作DOM - 这决定了它只能是单线程否则会带来很复杂的同步问题
3.代码的分类 - 初始化代码 - 回调代码
4.js引擎执行代码的基本流程 - 先执行初始化代码包含一些特别的代码 回调函数异步执行 - 设置定时器 - 绑定事件监听 - 发送ajax请求 - 后面在某个时刻才会执行回调代码
4.4事件循环模型
1.所有代码分类 - 初始化执行代码同步代码包含绑定dom事件监听设置定时器发送ajax请求的代码 - 回调执行代码异步代码处理回调逻辑
2.js引擎执行代码的基本流程初始化代码回调代码 3.模型的2个重要组成部分 - 事件定时器/DOM事件/Ajax管理模块 - 回调队列
4.模型的运转流程 - 执行初始化代码将时间回调函数交给对应模块管理 - 当事件发生时管理模块会将回调函数及其数据添加到回调队列当中 - 只有当初始化代码执行完后可能要一定时间才会遍历读取回调队列中的回调函数执行
button idbtn测试/buttonscriptfunction fn1(){console.log(fn1());}fn1();document.getElementById(btn).onclick function(){console.log(点击了btn);};setTimeout(function(){console.log(定时器执行了);},2000);function fn2(){console.log(fn2());}fn2();/script4.5Web Workers
1.h5规范提供了js分线程的实现取名为Web Workers 2.相关API - Worker:构造函数加载分线程执行的js文件 - Worker.prototype.onmessage: 用于接收另一个线程的回调函数 - Worker.prototype.postMessage: 向另一个线程发送消息
3.不足 - worker内代码不能操作DOM - 不能跨域加载js - 不是每个浏览器都支持这个新特性 input typetext placeholder数值 idnumberbutton idbtn计算/buttonscriptvar input document.getElementById(number);document.getElementById(btn).onclick function(){var number input.value;// 创建一个Worker对象var worker new Worker(worker.js);// 绑定接收消息的监听worker.onmessage function(event){console.log(主线程接收分线程返回);alert(event.data);};// 向分线程发送信息worker.postMessage(number);console.log(主线程向分线程发送数据number);};/scriptworker.js
function fibonacci(n){return n2? 1:fibonacci(n-1) fibonacci(n-2); //递归调用
}console.log(this);
var onmessage function(event){var number event.data;console.log(分线程接收到主线程发送的数据number);// 计算var result fibonacci(number);postMessage(result);console.log(分线程向主线程返回数据result);// alert(result) alert是window的方法在分线程不能调用// 分线程中的全局对象不再是window所以在分线程中不可能跟新界面
};
