persoments

 jQuery的插件扩展：
 
 把自己写的函数挂在 $ 上，类似 $.ajax
 格式：$.extend( { myAjax: 整个函数，去掉函数名 } );
 
 使用：$.myAjax();
Promise
 （1）JavaScript的特点：异步无阻塞
 无阻塞：不会被障碍(错误)影响
 若代码出错(或需要消耗时间)则先挪出队列，等其他代码都执行完在
重新执行该代码
 所有需要消耗时间执行的任务：异步任务
 不需要消耗时间执行的任务：同步任务
 JavaScript会自动分同步和异步两个队列，并且优先处理同步任务队列
 比如：setTimeout即使设为延迟0秒也是放进异步任务队列，在同步任务之后执行
 （2）如果要让JavaScript以阻塞式执行代码
 会形成地狱回调：为了形成阻塞式执行代码，一层套一层
 setTimeout( function (){
 console.log('1')
 setTimeout( function(){
 console.log('2')
 setTimeout( function(){
 console.log('3')
 setTimeout( function(){
 console.log('4')
 } ,3000)
 } ,3000)
 } ,3000)
 },3000)
 // 要用Promise把原始的setTimeout改造成返回promise对象的版本 cb = callback
 function mySetTimeout( cb,time ){
 return new Promise( function( resolve, reject ){
 setTimeout(function(){
 cb();
 resolve(); // 执行的是成功的回调函数，
 },time);
 } ) // 返回的是promise对象，可以接then
 }
 // 本质：Promise用另一种方式打破了JavaScript无阻塞的特点，用then语法绑定回调函数的形
式，间接实现了代码的阻塞执行
 mySetTimeout( function(){ console.log('1') } ,3000 )
 .then( function(){ return mySetTimeout( function(){ console.log('2')
} ,3000 ) } )
 .then( function(){ return mySetTimeout( function(){ console.log('3')
} ,3000 ) } )
 .then( function(){ return mySetTimeout( function(){ console.log('4')
} ,3000 ) } )
 （3）201510 ES6中 最伟大的发明 Promise
 公认常识：如果一个函数希望被以new的方式来调用，则这个函数的首字母大写
 创建一个promise对象的目的：马上执行一段异步的耗时的代码，并绑定成功或失败
的回调函数
 一个promise函数只能变一次状态，或者不变状态 resolve,reject是自带的两个参
数，不一定这个名
使用格式：
 new Promise( function(resolve,reject){ //promise创建的是obj对象里的内容
 // 一段异步的耗时的任务
 } )
 .then(
 function() { console.log('成功') }, // 状态为成功，执行这个
 function() { console.log('失败') } // 状态为失败，执行这个
 )
 then只是先提前说明了成功会干什么，失败会干什么，但还没做，要等任务执行完后是什么状
态
 即new Promise（）
 .then（ fun1，fun2 ）
// 工作原理：
var obj = {
 status: "pending", // status状态属性有三个值：pending挂起，rejected失败，
fulfilled成功
 data: undefined, // 携带的数据
 fulfilledCallback: null, // status从pending变为fulfilled时的回调函数
 rejectedCallback: null, // status从pending变为rejected时的回调函数
 then: function( fun1,fun2 ){ // then函数的主要作用是给回调函数赋值
 this.fulfilledCallback = fun1;
 this.rerejectedCallback = fun2;
 },
 resolve: function( data ){ // resolve主要作用是把status改成fulfilled
 this.data = data; // 把data赋值给this的data
 this.status = 'fulfilled'; // 把该函数的status赋值为fulfilled
 if( typeof this.fulfilledCallback === 'function' )
this.fulfilledCallback( this.data ); // 成功则调用成功的回调函数
 },
 reject: function( data ){ // reject的只要作用是把status改成rejected
 this.data = data;
 this.status = 'rejected';
 if( typeof this.rejectedCallback === 'function' ) this.rejectedCallback(
this.data ) // 失败则调用失败的回调函数
 },
 // 如果状态从挂起变为成功，并且有成功的回调函数就调用成功的回调函数
 // 如果状态从挂起变为失败，并且有失败的回调函数则调用失败的回调函数
 execAsyncTask: function( asyncTask ){
 asyncTask( this.resolve, this.reject );
 return this; // 返回的是obj本身
 }
}
 // synchrounous 同步 sync
 // asynchrounous 异步 async
 // execute 执行 exec
// promise的具体实现过程的模拟
 obj.execAsyncTask（function（resolve，reject）{ // 调用execAsyncTask函数返回
的是obj本身，可以再调用obj的then函数
 setTimeout（function（）{
 console.log（‘1’）；
 resolve（）；
 }，1000）；
 }）.then（ function（）{
 setTimeout（function（）{ console.log（‘2’） }，1000）；
 }）
 // 这时该函数是then函数的第一个参数，被赋值给成功状态的回调函数，当状态为成功时被调
用
原理说明：
Promise实际上是一个对象，这个对象中有一个属性status，status属性有三个值，pending代表
挂起，fulfilled代表成功，rejected代表失败
有一个data属性，表示携带的数据
还有两个回调函数
分别是fulfilledCallback属性，表示成功的回调函数
和rejectedCallback属性，表示失败的回调函数
这两个回调函数的制定是通过Promise的then函数的调用来实现的
这个Promise对象内部还有一个resolve方法和reject方法，用于把status从pending改为
fulfilled，或者是改为rejected
改为成功或失败时就会触发相应的回调函数的调用
 （4）减少某一函数的调用频率( 次数 )？ 防止点击次数太多，触发太多次事件
 防抖 => debounce
 面试问题：简单写一下防抖的函数
 （同ajax被封装在了$符号下）
 function debounce( func ,wait ){ // wait 是等待时间
 var lock = false;
 return function( args ){ // args 是函数触发对象，为了传给func对应的
函数
 if( lock ) return;
 lock = true;
 setTimeout( function(){ lock = false; } , wait )
 func.call( this , args ); // 使用call方法是为了能够访问this，真正被
调用的是return后面的函数，把该函数的this传给原函数
 }
 }
 $('button').on('click', debounce( function( e ){ } , 1000 ))
 // 调用debounce()返回的是return后面的函数,click事件执行的是该函数
431 关于this指向的对象
 （1）直接调用：浏览器指向window，node环境指向一个全局变量
 （2）和DOM事件绑定的函数：this指向事件相关的DOM
 （3）一个对象使用点来调用自身的某个函数：this指向调用对象
 （4）所有的函数都有一个方法 call( ) func.call( )
 （5）函数使用 call方法 调用是想 强制指定this指向call函数的第一个参数，还想再传参的话可
以在后边传
 函数以call的方式调用：this指向call函数的第一个参数
 var obj1 = { a:100 }
 var obj2 = { a:1000 }
 function fun( name1,name2 ){
 console.log(this.a)
 }
 fun.call( obj1,'zs','ls' ) // fun函数的this指向obj1 不影响后续传参
 （6）函数如果是以ES6箭头函数的方式创建：this指向箭头函数的父级作用域
 （7）如果一个函数通过new的方式来调用(被new的函数首字母大写)：this指向函数执行前在
内存中创建的空对象
 【注】公认常识：如果一个函数希望被以new的方式来调用，则这个函数的首字母大写
 var Student(){
 this.name:?,
 this.age:?,
 this.sex:?
 }
 var zs = new Student(); // 每次new都会先在内存创建一个空对象
 var ls = new Student();
选项卡切换精简写法
 $('.tab-title').on('click','li',function(){
 // 首先考虑重复被激活的情况，避免这种情况发生
 if( $(this).hasClass('active') ) return;
 // 可以把两个大部分相同的代码合在一起，主要是add（）里的内容要写对
 $(this).add( `.tab-content div:eq( ${$(this).index()} )` )
 .addClass('active').siblings('.active').removeClass('active')
 })

 

 

jQuery的插件扩展：

 

把自己写的函数挂在 $ 上，类似 $.ajax

格式：$.extend( { myAjax: 整个函数，去掉函数名 } );

 

使用：$.myAjax();

Promise

（1）JavaScript的特点：异步无阻塞

无阻塞：不会被障碍(错误)影响

若代码出错(或需要消耗时间)则先挪出队列，等其他代码都执行完在

重新执行该代码

所有需要消耗时间执行的任务：异步任务

不需要消耗时间执行的任务：同步任务

JavaScript会自动分同步和异步两个队列，并且优先处理同步任务队列

比如：setTimeout即使设为延迟0秒也是放进异步任务队列，在同步任务之后执行

（2）如果要让JavaScript以阻塞式执行代码

会形成地狱回调：为了形成阻塞式执行代码，一层套一层

setTimeout( function (){

console.log('1')

setTimeout( function(){

console.log('2')

setTimeout( function(){

console.log('3')

setTimeout( function(){

console.log('4')

} ,3000)

} ,3000)

} ,3000)

},3000)// 要用Promise把原始的setTimeout改造成返回promise对象的版本 cb = callback

function mySetTimeout( cb,time ){

return new Promise( function( resolve, reject ){

setTimeout(function(){

cb();

resolve(); // 执行的是成功的回调函数，

},time);

} ) // 返回的是promise对象，可以接then

}

// 本质：Promise用另一种方式打破了JavaScript无阻塞的特点，用then语法绑定回调函数的形

式，间接实现了代码的阻塞执行

mySetTimeout( function(){ console.log('1') } ,3000 )

.then( function(){ return mySetTimeout( function(){ console.log('2')

} ,3000 ) } )

.then( function(){ return mySetTimeout( function(){ console.log('3')

} ,3000 ) } )

.then( function(){ return mySetTimeout( function(){ console.log('4')

} ,3000 ) } )

（3）201510 ES6中 最伟大的发明 Promise

公认常识：如果一个函数希望被以new的方式来调用，则这个函数的首字母大写

创建一个promise对象的目的：马上执行一段异步的耗时的代码，并绑定成功或失败

的回调函数

一个promise函数只能变一次状态，或者不变状态 resolve,reject是自带的两个参

数，不一定这个名

使用格式：

new Promise( function(resolve,reject){ //promise创建的是obj对象里的内容

// 一段异步的耗时的任务

} )

.then(

function() { console.log('成功') }, // 状态为成功，执行这个

function() { console.log('失败') } // 状态为失败，执行这个

)

then只是先提前说明了成功会干什么，失败会干什么，但还没做，要等任务执行完后是什么状

态

即new Promise（）

.then（ fun1，fun2 ）

// 工作原理：

var obj = {

status: "pending", // status状态属性有三个值：pending挂起，rejected失败，

fulfilled成功

data: undefined, // 携带的数据

fulfilledCallback: null, // status从pending变为fulfilled时的回调函数

rejectedCallback: null, // status从pending变为rejected时的回调函数

then: function( fun1,fun2 ){ // then函数的主要作用是给回调函数赋值

this.fulfilledCallback = fun1;

this.rerejectedCallback = fun2;

},

resolve: function( data ){ // resolve主要作用是把status改成fulfilled

this.data = data; // 把data赋值给this的data

this.status = 'fulfilled'; // 把该函数的status赋值为fulfilled

if( typeof this.fulfilledCallback === 'function' )

this.fulfilledCallback( this.data ); // 成功则调用成功的回调函数

},

reject: function( data ){ // reject的只要作用是把status改成rejected

this.data = data;

this.status = 'rejected';

if( typeof this.rejectedCallback === 'function' ) this.rejectedCallback(

this.data ) // 失败则调用失败的回调函数

},

// 如果状态从挂起变为成功，并且有成功的回调函数就调用成功的回调函数

// 如果状态从挂起变为失败，并且有失败的回调函数则调用失败的回调函数 execAsyncTask: function( asyncTask ){

asyncTask( this.resolve, this.reject );

return this; // 返回的是obj本身

}

}

// synchrounous 同步 sync

// asynchrounous 异步 async

// execute 执行 exec

// promise的具体实现过程的模拟

obj.execAsyncTask（function（resolve，reject）{ // 调用execAsyncTask函数返回

的是obj本身，可以再调用obj的then函数

setTimeout（function（）{

console.log（‘1’）；

resolve（）；

}，1000）；

}）.then（ function（）{

setTimeout（function（）{ console.log（‘2’） }，1000）；

}）

// 这时该函数是then函数的第一个参数，被赋值给成功状态的回调函数，当状态为成功时被调

用

原理说明：

Promise实际上是一个对象，这个对象中有一个属性status，status属性有三个值，pending代表

挂起，fulfilled代表成功，rejected代表失败

有一个data属性，表示携带的数据

还有两个回调函数

分别是fulfilledCallback属性，表示成功的回调函数

和rejectedCallback属性，表示失败的回调函数

这两个回调函数的制定是通过Promise的then函数的调用来实现的

这个Promise对象内部还有一个resolve方法和reject方法，用于把status从pending改为

fulfilled，或者是改为rejected

改为成功或失败时就会触发相应的回调函数的调用

（4）减少某一函数的调用频率( 次数 )？ 防止点击次数太多，触发太多次事件

防抖 => debounce

面试问题：简单写一下防抖的函数

（同ajax被封装在了$符号下）

function debounce( func ,wait ){ // wait 是等待时间

var lock = false;

return function( args ){ // args 是函数触发对象，为了传给func对应的

函数

if( lock ) return;

lock = true;

setTimeout( function(){ lock = false; } , wait )

func.call( this , args ); // 使用call方法是为了能够访问this，真正被

调用的是return后面的函数，把该函数的this传给原函数

}

}

$('button').on('click', debounce( function( e ){ } , 1000 ))

// 调用debounce()返回的是return后面的函数,click事件执行的是该函数CSS 的几个点

（1）width：100% 代表什么？

代表当前盒子的width等于父级的content

!!!如果当前盒子绝对或固定定位了,当前盒子的width等于其参照物的宽度，包括

padding

如果父级宽度80,padding 20 当前盒子width为80

如果父级宽度80,padding 20 且设置了box-sizing:border-box 当前盒子width为

60

（2）绝对定位的参照物？

balabala 没有这种元素的，参照物是文档document的左上角

（3）width:100% 总是能生效 height:100% 有时候生效有时候不生效

css规定: height:100%要生效，其父级必须也显式的设置了height值

设置了绝对定位或固定定位的元素除外,会自动测量其参照物的高度

（4）margin和padding在垂直方向上设置百分比，计算的分母是谁?

分母是“ 父级的宽度 ” 父级的宽度是100px padding-bottom:100% == 100px

面试问题: 如果得到一个正方形,不知道宽高

设置padding-bottom或者padding-top: 100% 挤出正方形

（5）一个非常重要的属性: writing-mode

写字方向: 左到右,上到下

writing-mode: vertical-lr; 从左边竖着写

writing-mode: vertical-rl; 从右边竖着写

writing-mode: horizontal-tb; 默认值

writing-mode: horizontal-bt;

小米列表的li就是这种，但是要把li改成行内块或者行元素

而且writing-mode可以把ul挤宽,弹性盒不行

writing-mode只能对行内块或行元素设置

关于this指向的对象

（1）直接调用：浏览器指向window，node环境指向一个全局变量

（2）和DOM事件绑定的函数：this指向事件相关的DOM

（3）一个对象使用点来调用自身的某个函数：this指向调用对象

（4）所有的函数都有一个方法 call( ) func.call( )

（5）函数使用 call方法 调用是想 强制指定this指向call函数的第一个参数，还想再传参的话可

以在后边传 函数以call的方式调用：this指向call函数的第一个参数

var obj1 = { a:100 }

var obj2 = { a:1000 }

function fun( name1,name2 ){

console.log(this.a)

}

fun.call( obj1,'zs','ls' ) // fun函数的this指向obj1 不影响后续传参

（6）函数如果是以ES6箭头函数的方式创建：this指向箭头函数的父级作用域

（7）如果一个函数通过new的方式来调用(被new的函数首字母大写)：this指向函数执行前在

内存中创建的空对象

【注】公认常识：如果一个函数希望被以new的方式来调用，则这个函数的首字母大写

var Student(){

this.name:?,

this.age:?,

this.sex:?

}

var zs = new Student(); // 每次new都会先在内存创建一个空对象

var ls = new Student();

选项卡切换精简写法

$('.tab-title').on('click','li',function(){

// 首先考虑重复被激活的情况，避免这种情况发生

if( $(this).hasClass('active') ) return;

// 可以把两个大部分相同的代码合在一起，主要是add（）里的内容要写对

$(this).add( `.tab-content div:eq( ${$(this).index()} )` )

.addClass('active').siblings('.active').removeClass('active')

})

数组的知识总结（伪数组不能用）

数组的常用知识

作用

返回值

push（添加的新元素）

向数组的尾部添加一个元素

数组的新长度

pop（无）

删除数组的最后一个元素

被删除的元素

unshift（ 添加的新元素）

向数组的头部添加一个元素

数组的新长度

shift（无）

删除数组的第一个元素

被删除的元素

slice[ 截取的开始位置，结束

的位置）

截取子数组（不会改变原数组）（左

开右闭）

截取的元素构成的新数

组

-1表示最后一个位置，-2倒数第二

个，可以倒着截

只写开始的位置表示从该位置截取到

最后从0开始表示把该数组复制了一遍

（默认浅复制，元素为值类型时，浅

复制副作用不会发生，如果数组元素

是对象，浅复制的副作用就会发生）

JavaScript数据类型：值类型 和 引

用类型

值类型存在‘栈’中，引用类型存

在‘堆’中

值类型：在‘栈’中保存的是值

引用类型：在‘栈’中保存的是地

址，值在‘堆中保存’

任何的=赋值，仅仅是‘栈’中的内

容赋值

深赋值、深复制：不只在‘栈’中添

加一个新的，在‘堆’中野添加一个

新的，各改各的，互不影响

浅赋值、浅复制：仅仅在‘栈’中添

加一个新的，改值会影响原数组

splice（截取的开始位置，

长度，新元素...）

插入：只有第一个参数，（插入的位

置，长度为0）

删除：前两个参数，（删除的开始，

删除的长度）

替换：三个参数，删了再添

如果插入的是一个数组，会整个数组

插进去，可以用遍历插

被删除的元素构成的数

组

原数组会变

contact（另一个数组）

将两个数组进行连接（原数组不变） 拼接成的新数组

join（分割符）

使用指定的分割符将所有数组元素连

接成字符串

默认分割符：逗号，

indexOf（要查找的元素）

查找元素在数组中第一次出现的下标

索引

找到则返回下标（0开

始）

没有找到则返回-1

lastIndexOf（要查找的元

素）

查找元素在数组中最后一次出现的下

标索引

找到则返回下标（0开

始）

没有找到则返回-1

indexOf 和 lastIndexOf仅适用于简

单型数组

（整型数组 和 字符串数组）

是浅比较，仅比值，引用类型无法用

arr . findIndex（

function（item，index）{

return item.name

=== 值；}

）

findIndex适用于引用类型数组

查找符合条件的元素第一次出现的位

置

必须返回一个bool类型的结果

找到则返回下标（0开

始）

没有找到则返回-1

arr . find（

function（item，index）{

按条件查找第一个满足条件的元素

必须返回一个bool类型的结果

找到则返回找到的元素

比如： {name: "345"} return item.name

=== 值；}

）

找不到返回undefined

arr . filter（

function（item，index）{

return item.name

=== 值；}

）

按条件查找所有满足条件的元素

必须返回一盒bool类型的结果

找到或找不到都会返回

一个数组，区别：有无

值

找到则返回找到的元素

构成的数组

比如：[

{name: "345"} ]

找不到返回一个空数组

可以从length判断是否

找到元素

forEach（函数）

注重迭代/遍历，注重过程

map（函数，内部是具体的

映射规则）

根据当前数组按一定的规则映射出一

个新数组

原数组不变

必须返回一个结果，不然return默认

返回undefined

映射出的新数组 新数组数量不变，内容

会根据映射规则改变

比如：item*2

得到的是原数组中值*2

后的新数组

some（函数，必须返回一个

bool类型的节果）

判断数组中有没有任意一个元素符合

条件，能让函数参数返回真

找到一个满足条件的元素就会终止循

环返回真

如果遍历完都没有找到则返回假

真 或 假

every（函数，必须返回一个

bool类型的节果）

判断数组中是否所有元素都符合条

件，让函数参数返回真

找到一个不满足条件的就会终止循环

返回假

如果遍历完所有元素都符合条件则返

回真

真 或 假

reduce（函数，必须返回一

个确定的结果）

使用参数函数按照一定的逻辑对整个

数组从左到右进行‘收缩’

有第二个参数：第二个参数是参数函

数初始没有返回值时用的

参数函数最后一次调用

return返回的结果

reduceRight（函数，必须

返回一个确定的结果）

使用参数函数按照一定的逻辑对整个

数组从右到左进行‘收缩’

参数函数最后一次调用

return返回的结果

reverse（无）

将数组翻转（会改变原数组）

返回翻转后的数组本身

sort（无 或 提供一个返回

bool类型的参数）

arr . sort(function(n1, n2) {

return n1 - n2; 升

序排

})

arr . sort(function(n1, n2) {

return n2 - n1; 将

序排

})

按参数函数的规则对数组元素进行升

序或降序排列

（原数组会改变）

（使用n1 - n2形式可以避免sort的

排序bug）

返回值排序后的数组本

身Array.isArray（判断的变

量）

判断一个变量是不是数组

真 或 假

var a = 10;

var b = a;

var obj = { a:100 };

var obj2 = obj;

 

（5）面试题：输出的是多少？

var length = 1;

var obj = {

length:100,

fun:function() {

arguments[0]();

// arguments.0(); 两行调用方式一样,但是键值是数字不能用.0的方式调

用,只能用[ ],所以this实际上指向arguments

}

};

obj.fun(function() { console.log(this.length) }, 1000 , 1 )

（6）

（7）