JS高级

面向对象编程

解决this指向问题，可以定义一个全局变量如 var that; 在构造函数中赋值 that = this; 这样后边需要指向实例对象时，就可以用that。

另一种插入HTML节点

element.insertAdjacentHTML(position, text);
//position: 一个 DOMString，表示插入内容相对于元素的位置，并且必须是以下字符串之一：
        'beforebegin'：元素自身的前面。
        'afterbegin'：插入元素内部的第一个子节点之前。
        'beforeend'：插入元素内部的最后一个子节点之后。
        'afterend'：元素自身的后面。

//text:是要被解析为HTML或XML元素，并插入到DOM树中的 DOMString。 

位置名称的可视化

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

• 将元素想象成一个带有上下边界的内容区，上边界为begin，下边界为end。

例：

//1.创建li元素和section元素
var li = '<li class='liactive'><span>test1</span></li>'
//2.把这两个元素追加到对应的父元素里边
this.ul.insertAdjacentHTML('beforeend',li); //把刚刚创建的li插入

• Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。
• 如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么使用 insertAdjacentHTML() 方法。

原型

在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjfcsCdv-1651287723149)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20220421093641470.png)]

构造函数原型对象prototype

每一个构造函数都有一个prototype属性，指向另一个对象。这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

我们可以把不变的方法，直接定义在prototype对象上，这样所有的对象的实例就可以共享这些方法。

Q&A

1.原型是什么？

一个对象，我们也称prototype为原型对象。

2.原型的作用是什么？

共享方法。

对象原型 __proto__

对象都会有一个属性 __proto__ （前后各两条下划线），指向构造函数的原型对象prototype，对象之所以可以使用构造函数prototype原型对象的属性和方法，就是因为对象有 __proto__原型的存在。

方法的查找规则

首先先看实例对象身上是否有该方法，如果有就执行，若没有，则由于有__proto__的存在，就去构造函数原型对象prototype身上查找该方法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6HIglmEs-1651287723150)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20220422121641329.png)]

原型链

在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

举例说明:person → Person → Object ，普通人继承人类，人类继承对象类

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EHOC6dqu-1651287723150)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20220423190031044.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Kv9dUP7-1651287723151)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20220425104014807.png)]

利用父构造函数继承属性

在子构造函数中使用 call() 方法

call(thisObject, arg1 ,arg2 ...)
//thisObject ： this指向
//arg1，arg2 ： 函数实参

this总是指向调用某个方法的对象，但是使用call()方法时，就会改变this的指向。

例：

//父构造函数
function Father(uname,age) {
    
    
	this.name = uname;
	this.age = age;
}
//子构造函数
function Son(uname,age,score) {
    
    
	Father.call(this,uname,age);
    this.score = score;
}
Son.prototype = new Father();
Son.prototype.constructor = Son;
//如果利用对象的形式修改了原型对象，别忘记利用constructor指回原来的构造函数
var son = new Son('xiaoming',18,100);
console.log(son);

ES6类的本质

1.class本质是function

2.类的所有方法都定义在类的prototype属性上

3.类创建的实例，里面也有 __proto__指向类的prototype原型对象

4.所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

5.所以ES6的类其实就是语法糖

数组方法

forEach

遍历数组

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
//callback
    为数组中每个元素执行的函数，该函数接收一至三个参数：
//currentValue
    数组中正在处理的当前元素。
//index 可选
    数组中正在处理的当前元素的索引。
//array 可选
    forEach() 方法正在操作的数组。

some

filter

map

创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

对象方法

defineProperty()

直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)

//obj
    要定义属性的对象。
//prop
    要定义或修改的属性的名称或 Symbol 。
//descriptor
    要定义或修改的属性描述符。以对象形式{
    
    }书写
    value:设置属性的值，默认为undefined
    writable：值是否可以重写。默认为false
    enumerable：目标属性是否可以被枚举。默认为false  //Object.keys(object)遍历对象
    configurable：目标属性是否可以被删除或是否可以被删除或是否可以再次修改特性。默认为false
    
//例
const object1 = {
    
    };

Object.defineProperty(object1, 'property1', {
    
    
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42

闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数。——JavaScript高级程序设计

简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。

MDN：

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

闭包的主要作用：延伸变量的作用范围。

部变量。

MDN：

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

闭包的主要作用：延伸变量的作用范围。