函数对象

一、函数是一个对象

函数是一个对象，所以：
（1）函数可以赋给一个变量；
（2）函数名可以作为另外一个函数的参数；
（3）函数对象也可以作为另一个函数的返回值；

二、函数自运行

1、函数自运行：在函数定义时直接运行，针对于匿名函数；
2、函数自运行的三种方式：

//a.
(function(){
    console.log("heihei");
}());
//b.    
(function(){
    console.log("xixi");
})();
//c.
//运算符
void function(){
    console.log("haha");
}();
! function(){
    console.log("yingyingying");
}();

3、匿名函数的常见用法：
函数表达式（var test = function( ){ }）
事件处理函数 (document.onclick = function( ){ })
自运行（立即执行）
闭包里的返回值

三、函数对象

1、函数的本质就是一个对象；
2、函数的三种定义方式：
c. let f = new Function（ [ “函数的形参，每两个参数之间逗号分开” ]，”函数体”）；

//a.
function f1(){
    console.log("f1");
}
//b.
let f2 = function(){
    console.log("f2");
}
//c.
let f3 = new Function(["函数的形参，每两个参数之间逗号分开"],"函数体");
let f3 = new Function("console.log('xixi')");
f3();  //xixi
let f4 = new Function("a","b","return a+b");
console.log(f4(1,2));  //3
let f5 = new Function("a","b","return a+b");
let f6 = new Function("a","b","return a+b");
console.log(f5 == f6);  //false

四、arguments

1、arguments：存储实参的伪数组，可以按照数组的方式使用，但是不能使用除了length以外的数组API；

function fun(){        
    for(let i=0; i<arguments.length; i++){
        console.log(arguments[i]);  //1 heihei 3
    }
}
fun(1,"heihei",3);

2、不定参函数的设计：

function fun(){
    for(let i=0; i<arguments.length; i++){
        if(typeof(arguments[i]) == "number"){
            console.log("执行数字操作");
        }
        if(typeof(arguments[i]) == "string"){
            console.log("执行字符串操作");
        }
    }
}
fun(1);  //执行数字操作

3、arguments.callee：代表该函数对象本身

五、递归

递归：一个函数直接或者间接的调用自己本身

var count = 0;
function fun(){
    console.log(++count);
    arguments.callee();  //代表该函数对象本身
}
fun();  //结果是死循环，一直加1，最终栈溢出报错

闭包（面试题）

闭包的概念?<br />    函数嵌套函数,被嵌套的函数就是闭包函数<br />    作用:<br />    可以在一个函数的外部,使用该函数的内部局部变量<br />    实现:<br />    创建一个子函数,子函数操作父函数的局部变量,<br />    将子函数作为父函数的返回值,<br />    在外部定义全局变量绑定父函数的返回值,从而实现全局与局部的绑定,<br />    延长了局部变量的生命周期<br />    缺陷:<br />    闭包会打破垃圾回收机制,大量使用闭包可能会造成内存泄露

1、什么是闭包函数？

函数嵌套函数，被嵌套的那个函数就是闭包函数；

2、闭包函数的作用？

（1）闭包函数的作用就是为了在一个函数的体外去使用该函数体内的局部变量；
（2）增加块级作用域；

3、如何实现？（原理）

在子函数中使用父函数的局部变量，将子函数作为父函数的返回值；在父函数体外通过一个全局变量与该函数的返回值进行绑定，从而延长了局部变量的生命周期。
（将子函数作为父函数的返回值，在父函数外部通过一个全局变量来接收它，这样做就将父函数的局部变量和这个全局变量进行了数据的绑定，绑定之后就可以通过外部的方式来访问父函数体内的子函数，而子函数里面又使用了父函数的局部变量，从而就可以实现在一个函数的体外去使用该函数体内的局部变量）；

4、使用闭包函数的注意事项（坏处）：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

function f1(){
    var count = 0;
    var f2 = function(){
        console.log(++count);
    }
    return f2;
}
var f = f1();
f();  //1
f();  //2
f();  //3

优化：

unction f1(){
    var count = 0;
    return function(){
        return ++count;
    }
}
var f = f1();
console.log(f());  //1
console.log(f());  //2
console.log(f());  //3

var f = (function(){
    var count = 0;
    return function(){
        return ++count;
    }
}());
console.log(f());  //1
console.log(f());  //2
console.log(f());  //3

原型对象prototype:

一、原型对象prototype

unction Student(name,id,age){
  this.name = name;
  this.id = id;
  this.age = age;
  this.study = function(){
    console.log("study");
  }
}
let s1 = new Student("凡凡",1,18);
let s2 = new Student("JJ",2,18);

之前创建类，将方法写在类中，导致每创建一个对象都创建了一次该类的所有方法，额外浪费空间；
1、prototype：原型对象
作用：将所有属于类族的方法或者属性放在该对象中（将共有属性和方法保存在prototype中，节约内存）；

function Student(name,id,age){
  this.name = name;
  this.id = id;
  this.age = age;
}
Student.prototype.study = function(){  //共有方法
  console.log("study");
}
Student.prototype.flag = "我要发律师函";  //共有属性
let s1 = new Student("凡凡",1,18);
let s2 = new Student("JJ",2,18);
console.log(s1.name,s1.id,s1.age,s1.flag);
s1.study();
console.log(s2.name,s2.id,s2.age,s2.flag);
s2.study();

2、实例化对象是如何访问所有的属性和方法的：
（1）new出来的属性可以直接访问；
（2）每个实例化对象new的时候除了属性外还有一个proto属性,它指向类的prototype；
（3）通过proto访问prototype里类族的共有方法和属性； JS第六周 - 图1

二、原型继承

1、继承：子类获得父类已有的属性和方法；
2、作用：子类可以使用父类的属性和方法，并且可以添加自己新的属性和方法，从而提高代码的复用性；
3、原型继承实现的方法规则：用子类的原型对象指向父类的实例化对象（让子类原型对象的值父类的实例化对象，即实现了继承）;

function Animal(name){
  this.name = name;
}
Animal.prototype.eat = function(){
  console.log("Animal eat");
}
//原型继承的实现方法:用子类的原型对象指向父类的实例化对象
Human.prototype = new Animal("凡凡");  
function Human(id){
  this.id = id;
}
Human.prototype.study = function(){
  console.log("Human study");
}
let h = new Human("008");
h.name = "JJ";
console.log(h.name,h.id);  //JJ 008
h.eat();  //Animal eat
h.study();  //Human study
let h1 = new Human("009");
console.log(h1.name);  //凡凡
h1.eat();  //Animal eat
console.log(h1.id);  //009

4、原型继承的注意事项（缺陷）
（1）先实现继承关系, 再为子类添加原型方法或者属性,否则会被覆盖；
（2）所有由父类派生给子类的属性都是无法初始化的；
（3）继承关系实现后，子类的原型对象不能再修改；
JS第六周 - 图2

三、instanceof

语法：对象 instanceof 类型
作用：判断该对象是否为该类型，返回布尔值；

console.log(h instanceof Human);  //true
console.log(h instanceof Animal);  //true
let a = new Animal("jj");
console.log(a instanceof Animal);  //true
console.log(a instanceof Human);  //false

区别
想必到这里大家也都明白两者的含义和用法，总之，typeof和instanceof都是用来判断变量类型的，两者的区别在于：

typeof判断所有变量的类型，返回值有number，boolean，string，function，object，undefined。
typeof对于丰富的对象实例，只能返回”Object”字符串。
instanceof用来判断对象，代码形式为obj1 instanceof obj2（obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值。
instanceof可以对不同的对象实例进行判断，判断方法是根据对象的原型链依次向下查询，如果obj2的原型属性存在obj1的原型链上，（obj1 instanceof obj2）值为true。

四、原型链继承

function Animal(name){
    this.name = name;
}
Animal.prototype.eat = function(){
    console.log("Animal eat");
}
//人类继承了动物类的所有属性和方法
Human.prototype = new Animal("凡凡");
function Human(id){
    this.id = id;
}
Human.prototype.makeTools = function(){
    console.log("Human makeTools");
}
//学生类继承了人类的所有属性和方法
Student.prototype = new Human(1);
function Student(score){
    this.score = score;
}
Student.prototype.study = function(){
    console.log("Student study");
}
let s = new Student(50);
console.log(s.name,s.id,s.score);  //凡凡 1 50
s.eat();  //Animal eat
s.makeTools();  //Human makeTools
s.study();  //Student study

1、原型链继承的实现方式：用子类的原型对象指向父类的实例化对象，父类的原型对象指向爷爷类的实例化对象，依次类推，就形成了原型链；
2、原型链继承访问属性的原理：先在自己的类中查找属性或者方法，找不到就去找父类（向上查找）;
JS第六周 - 图3

call和apply

function Cat(name){
    this.name = name;
}
Cat.prototype.eat = function(food){
    console.log("Cat:eat"+food);
}
function Dog(name){
    this.name = name;
}
Dog.prototype.eat = function(food){
    console.log("Dog:eat"+food);
}
let c = new Cat("kitty");
let d = new Dog("雪球");
c.eat("小鱼干");  //Cat:eat小鱼干
d.eat("肘子");   //Dog:eat肘子

Cat 类中的 eat 方法与Dog 类中的 eat 方法很相似，通过一下方式进行优化，提高代码的复用性；

function Cat(name){
    this.name = name;
}
function Dog(name){
    this.name = name;
}
function eat(food1,food2){
    console.log(this.name+"eat:"+food1+","+food2);
}
let c = new Cat("猫");
let d = new Dog("狗");
eat.call(c,"猫粮","鱼干");  //猫eat:猫粮,鱼干
eat.call(d,"狗粮","骨头");  //狗eat:狗粮,骨头
eat.apply(c,["猫粮","鱼干"]);  //猫eat:猫粮,鱼干
eat.apply(d,["狗粮","骨头"]);  //狗eat:狗粮,骨头

1、call 和 apply：改变有名函数的this指向；
2、语法：
函数.call(“要被改变的this指向”,”该方法的真实参数1,真实参数2…”);
函数.apply(“要被改变的this指向”,”[该方法的真实参数1,真实参数2…]”);
3、解释bind，apply，call的作用及区别：
1.全都是改变this指向
2.aplly、call针对有名函数,bind针对匿名函数
3.aplly、call直接调用函数
bind等价绑定函数,还需要将绑定的结果进行调用
4.apply的参数需要用[]括起来,call不需要
JS第六周 - 图4

apply和call的继承、混合继承、ES6继承

一、apply和call的继承：
1、apply和call”继承”：可以解决原型继承中无法初始化父类派生给子类的属性这个问题

function Animal(name,age){
    this.name = name;
    this.age = age;
}
Animal.prototype.eat = function(){
    console.log("Animal eat");
}
function Human(name,age,id){
    //借用构造方法
    Animal.call(this,name,age);
    //Animal.apply(this,[name,age]);
    this.id = id;
}
let h = new Human("凡凡",18,1);
console.log(h.name,h.age,h.id);  //凡凡 18 1
h.eat();  //报错，apply和call无法继承原型对象上的方法

2、apply和call”继承”其实是借用构造方法，不是严格意义的继承；
缺陷：无法继承原型对象上的方法；
二、混合继承：
混合继承：属性用apply和call继承，原型对象中方法和属性用原型对象继承；

function Animal(name,age){
    this.name = name;
    this.age = age;
}
Animal.prototype.eat = function(){
    console.log("Animal eat");
}
function Human(name,age,id){
    Animal.call(this,name,age);  //继承了属性
    this.id = id;
}
Human.prototype = new Animal();  //继承了原型对象中的方法
Human.prototype.study = function(){
    console.log("Human study");
}
let h = new Human("凡凡",18,1);
console.log(h.name,h.age,h.id);  //凡凡 18 1
h.eat();  //Animal eat
h.study();  //Human study

三、ES6继承
extends是实现继承的关键字, 子类 extends 父类

class Animal{
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
    eat(){
        console.log("Animal eat");
    }
}
//extends是实现继承的关键字, 子类 extends 父类
class Human extends Animal{
    constructor(name,age,id) {
        super(name,age); //属性的继承,super必须放在第一行
        this.id = id;
    }
    study(){
        console.log("Human study");
    }
}
let h = new Human("凡凡",18,1);
console.log(h.name,h.age,h.id);  //凡凡 18 1
h.eat();  //Animal eat
h.study();  //Human study

深拷贝和浅拷贝

1、内置基本类型与引用类型在内存中存储的异同（面试题）
内置基本类型：只有一块栈空间，保存的是变量的数值；
引用类型：有两块空间，一块是栈空间，一块是堆空间，栈存储的是堆空间的地址，堆存储的是真正的内容；
2、引用类型才有深拷贝与浅拷贝的概念
（1）浅拷贝：只拷贝内容但是不开辟空间，两个变量共享一块堆空间（传参时值只传递了引用空间的地址）;

let arr = [1,2,3];
let arr1 = arr;  //浅拷贝，两个变量共享一块堆空间
arr1[1] = "凡凡";  //操作其中一个，两个变量都会改变
console.log(arr,arr1);

JS第六周 - 图5
（2）深拷贝：开辟空间且赋值；

let arr = [1,2,3];
let arr1 = [];  //开辟空间
for(let i = 0;i<arr.length;i++){  //赋值
    arr1.push(arr[i]);
}
arr1[1] = "凡凡";  //只会改变arr1数组中下标为1的元素
console.log(arr,arr1);

JS第六周 - 图6

let arr = [1,2,3];
let arr1 = [];  //开辟空间
arr1 = [...arr];  //...扩展运算符:赋值的是引用类型的内容，而不再是地址
arr1[1] = "凡凡";
console.log(arr,arr1);  //结果与上面一致

本地存储localStorage和sessionStorage

早期的web中使用cookies在客户端保存诸如用户名等简单的信息，但是，在使用cookies存储永久数据存在以下问题：
1. cookies的大小限制在4kB，不适合大量的数据存储。
2. 浏览器还限制站点可以在用户计算机上存储的cookies的数量。
3. cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。
HTML5很好的提供了本地存储的功能，以键值对存储的解决方案，支持容量至少为4M，HTML5的web提供了两种客户端存储方式。
localStorage：是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端。
sessionStorage：指的是针对一个session的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据就被删除。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
JS第六周 - 图7
2、localStorage和sessionStorage具有相同的操作方法：
（1）setItem(key,value)：将value存储到key指定的字段；

//增改：
//a.
localStorage.setItem("name","laowang");
sessionStorage.setItem("name","凢凢");
//b.
localStorage.pwd = "123";
//c.
localStorage["age"] = 18;

（2）getItem(key)：获取指定key所存储的value值；

console.log(localStorage.getItem("name"));  //laowang
console.log(localStorage.pwd);  //123
console.log(localStorage["age"]);  //18

（3）key(index)：返回列表中对应索引的key值；
（4）length：返回key/value队列的长度；

for(let i = 0;i<localStorage.length;i++){
    console.log(localStorage.getItem(localStorage.key(i)));  //laowang 123 18
    }

（5）removeItem(key)：从Storage中删除一个对应的键值对；
（6）clear()：移除所有的内容；

//删
localStorage.removeItem("pwd");
localStorage.clear();

3、localStorage中可以存储复杂的数据类型：

localStorage.setItem("data",'{"name":"laowang","age":"18","id":1}');
let str = localStorage.getItem("data");
let json = JSON.parse(str);
for(let index in json){
    console.log(json[index]);  //laowang 18 1
}

4、在页面关闭时执行的代码段：

onbeforeunload = function(){
 localStorage.setItem("name","laowang");
 }

设计模式

为什么使用设计模式：
尽量用一种标准的方式描述设计经验；
为设计者提供一种通用的语言；
增加复用性，减少设计的多样性；
增强设计变更的灵活性；
提高设计文档的质量；
增强设计的可理解性；
一、单例模式：
1、单例模式：该类只能有一个对象；
2、作用：更加便捷的传递数据；
3、核心：只能创建一个对象,除了首次创建对象之外，其他创建对象得到的将是第一次创建的对象；
4、单例模式的写法：见第28天代码 05-单例模式
二、工厂模式：
1、工厂模式：根据不同的环境创建对象；
2、工厂模式的写法：见第28天代码 06-工厂模式

插件编写

一、插件：
插件是一个独立的功能，与函数相比，它是更加完整的功能。
假设将一个汽车比作项目：函数好比汽车的螺丝，螺帽；而插件就好比发动机，变速
箱。
二、源生JS弹出框插件：
见第29天代码 02-弹出框插件.html 和 02-弹出框插件.js
三、源生JS放大镜插件：
见第29天代码 03-放大镜插件.html 和 03-放大镜插件.js
四、源生ajax插件：
见第29天代码 04-ajax插件.html 、04-ajax插件.js 和 04-test.txt
五、源生选择器插件：
见第29天代码 05-选择器插件.html 和 05-选择器插件.js
静态方法：该方法不需要用到该类对象的属性，则建议设置为静态方法；
static修饰的方法就是静态方法,该方法只能通过类名调用，不能通过对象调用；
JS第六周 - 图8
JS第六周 - 图9

jQuery

jQurey官方网站：https://jquery.com/
jQurey中文文档：https://jquery.cuishifeng.cn/

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

一、jQuery的引入

（1）本地引入：
JS第六周 - 图10 00
（2）在线引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

二、jQuery第一个程序：

1、jQuery == $ jQuery完全等价于$

<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 $(function(){
     console.log("haha");  //左右花括号间类似于onload延迟加载
 });
 //上述代码的完全体
 $(document).ready(function(){
     console.log("heihei");
 })
</script>

2、onload 和 ready的区别：
ready表示文档已加载完成（不包含图片等非文字媒体文件）;
onload是指页面包含图片在内的所有元素都加载完成；
* $(document).ready(function(){ })要比window.onload先执行。

三、jQueryDom和源生Dom相互转换：

1、jQueryDom ——> 源生Dom（jQuery所有的Dom元素都放在包装集中）

<p id="box">456</p>
//将包装集中下标为0元素的源生Dom对象返回
console.log($("#box")[0].innerHTML);
console.log($("#box").get(0).innerHTML);

2、源生Dom ——> jQueryDom

<p id="box">456</p>
let oP = document.getElementById("box");
console.log($(oP).html());

四、选择器：

1、基本选择器：

（1）标签选择器：

$("div").css("backgroundColor","red");
$("div").css({
   backgroundColor:"red"    //多组css样式用，隔开
});

（2）id选择器：

$("#test").css({backgroundColor:"yellow"});

（3）class选择器：

$(".test").css({backgroundColor:"blue"});

（4）群组选择器：

$("span,strong").css({backgroundColor:"green"});

（5）通用选择器：

$("*").css({backgroundColor:"orange"});

2、层次选择器：

（1）后代选择器：

$("body div").css({backgroundColor:"red"});

（2）子代选择器：

$("body>div").css({backgroundColor:"red"});

（3）相邻选择器：

$("#box2+div").css({backgroundColor:"red"});

（4）兄弟元素：

$("#box2~div").css({backgroundColor:"red"});

3、属性选择器：

（1）只看属性名：

$("div[class]").css({backgroundColor:"red"});

（2）不但看属性名，还要看属性值：

$("input[type=password]").val(111);

（3）通过多属性查找：

$("div[id][class]").css({backgroundColor:"red"});

4、伪类选择器：

（1）选中偶数行：

$("div:even").css({backgroundColor:"red"});

（2）选中奇数行：

$("div:odd").css({backgroundColor:"yellow"});

（3）first 第一个：

$("div:first").css({backgroundColor:"blue"});

（4）last 最后一个：

$("div:last").css({backgroundColor:"green"});

（5）eq(n) 选中下标为n的元素，下标从0开始：

$("div:eq(2)").css({backgroundColor: "pink"});
$("div").eq(3).css({backgroundColor:"hotpink"});

（6）not 除了：

$("div:not(#box2)").css({backgroundColor:"skyblue"});
$("div").not("#box3").css({backgroundColor:"skyblue"});

（7）lt(n) 选中下标小于n的元素,不包含n：

$("div:lt(2)").css({backgroundColor:"gold"});

（8）gt(n) 选中下标大于n的元素,不包含n：

$("div:gt(2)").css({backgroundColor:"skyblue"});

5、内容选择器：

（1）contains(内容) 选中包含该内容的元素：

$("div:contains('he')").css({backgroundColor:"red"});

（2）empty 选中内容为空的元素：

$("div:empty").css({backgroundColor:"red"});

（3）has(节点) 选中包含某个节点的元素：

$("div:has(span)").css({backgroundColor:"hotpink"});

6、可见性选择器：

（1）hidden 改变不可见元素的样式：

$("tr:hidden").css("background","green");

（2）visible 改变可见元素的样式：

$("tr:visible").css("background","red");

五、jQuery遍历：

1、兄弟节点的遍历：
（1）next 下一个：

$("#box2").next().css({backgroundColor:"red"});

（2）nextAll 下一堆：

$("#box2").nextAll().css({backgroundColor:"red"});

（3）prev 上一个：

$("#box2").prev().css({backgroundColor:"red"});

（4）prevAll 上一堆：

$("#box2").prevAll().css({backgroundColor:"yellow"});

2、父找子：
（1）find（”必须加子元素的参数”）

$("#box0").find("p").css({backgroundColor: "gold"});

（2）children（[子元素可不写]）

$("#box0").children().css({backgroundColor: "grey"});

3、parent 子找父：

$("li").parent().css({backgroundColor: "pink"});

4、连缀模式：

 $("p").eq(3).parent().prev().find("p").css({
        backgroundColor: "red"
    });

六、文本：无参为读，有参为写

1、innerHTML == html( );

<p>123</p>
//写
   $("p").html("嘿嘿");
//读
   console.log($("p").html()); 
<ul></ul>
let str = `<li>1</li>`;
str += `<li>2</li>`;
$("ul").html(str);

JS第六周 - 图11
2、value == val( );

<input type="text" name="" id="" value="666" />
//写
    $("input").val("xixi");
//读
    console.log($("input").val());

七、事件：click([[data],fn])

见第30天代码 10-事件.html

<div id="box"></div>
$("#box").click(function() {  //点击变黄
     $(this).css({backgroundColor: "yellow"}); //this是源生的，需转换成jQureyDOM
});
$("#box").click({"name": "老王","age": 8}, function(evt) {
    console.log(evt.data);
});

八、动画效果：

1、基本：见第30天代码 11-简单动画-基本.html
（1）隐藏：$(“#box”).hide(动画时间,过渡效果,回调函数);
（2）显示：$(“#box”).show(动画时间,过渡效果,回调函数);
（3）$(“#box”).toggle(动画时间,过渡效果,回调函数);
功能：显示的时候让其隐藏，隐藏的时候让其显示；
2、滑动：见第30天代码 12-简单动画-滑动.html
（1）滑上：$(“#box”).slideUp(动画时间,过渡效果,回调函数);
（2）滑下：$(“#box”).slideDown(动画时间,过渡效果,回调函数);
（3）$(“#box”).slideToggle(动画时间,过渡效果,回调函数);
功能：滑下的时候让其滑上，滑上的时候让其滑下；
3、淡入淡出：见第30天代码 13-简单动画-淡入淡出.html
（1）淡出：$(“#box”).fadeOut(动画时间,过渡效果,回调函数);
（2）淡入：$(“#box”).fadeIn(动画时间,过渡效果,回调函数);
（3）$(“#box”).fadeToggle(动画时间,过渡效果,回调函数);
功能：淡入的时候让其淡出，淡出的时候让其淡入；
4、自定义动画：见第30天代码 14-自定义动画.html
1、XXX.animate({效果的变化},时间,过渡效果,回调函数); （只能修改宽高left和top）
2、结束动画：XXX.stop( );
（1）结束当前动画：
$(“.box”).stop(false, false);
（2）结束当前动画及动画队列：
$(“.box”).stop(true, false);
（3）立刻执行完当前动画：
$(“.box”).stop(false, true);
（4）立刻执行完当前动画，且结束动画队列：
$(“.box”).stop(true, true);
3、手风琴案例：见第30天代码 15-手风琴.html