JavaScript原型链

发表于 2021-05-04 更新于 2023-03-18 分类于 Web前端 Valine：
本文字数： 2k 阅读时长 ≈ 2 分钟

JavaScript原型链

要搞清楚原型链，我们首先了解什么是原型？每个函数都有prototype属性，我们称之为原型,又因为这个属性的值是一个对象，所以我们也称为原型对象。

那么什么是对象呢？

这里我们要了解在JavaScript中对象是一种引用数据类型。我们可以通过很多种方式来创建一个对象。我们常用构造函数的方式来创建一个对象：

//构造函数
function People(name,age,sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
}

//生成实列
const p = new People('小明'，16,'男')

那么，函数与对象的关系是怎么样的呢？

函数是对象，对象都是通过函数创建的。

函数与对象并不是简单的包含与被包含的关系。

在我们上面创建的对象中，通过定义常量实例化后，在原来构造函数中通过this赋值的方法或者属性，已经在实例化后成为了每个实例的实例属性和实例方法，无法共享公共属性和方法。所以设计出了一个原型对象，来存储这个构造函数的公共属性及方法。

我们再下面一段代码了加深一下理解：

// 构造函数
function Preson(name, age,sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
// 所有实例共享的公共方法
Preson.prototype.say = function (word) {
  console.log(`${this.name}说：${word}`);
}

const p1 = new Preson('张三', 18,'男'); // 创建一个Person实例对象
p1.hasOwnProperty('say') // false 说明不是定义在其本身上的
p1.say('hello world'); // 调用公共方法 打印：张三说：hello world

可以看到我们实例对象实例p1调用到Person这个构造函数的原型对象上的say()方法。但是为什么呢？明明只有在构造函数内部通过this来赋值的属性或者方法才会被实例所继承，为什么在构造函数的原型对象上定义的say方法也能通过实例来调用到呢？这里就引出了原型链这个概念。

实际上原型对象中存在的构造函数指向了我们function创建的对象。并且每个对象都有一个__proto__属性，这个属性会指向实例对象的构造函数的原型对象，这样使得彼此之间存在一定的指向关系，能够使每个实列化对象能够使用构造函数的原型对象的方法。

而这种指向关系，我们就称之为原型链。图解如下：

我们可以看到，它的__proto__属性指向了一个function Function的原型对象，该原型对象为JS中所有函数的原型对象，而其__proto__属性也还是指向了function Object的原型对象，所以验证了原型链的尽头为null，这一说法。

在开发的时候，要注意不要通过实例对象去改变其构造函数的原型对象，这样会对其他通过该构造函数生成的实例对象造成影响。

//开发中需注意点

    // 构造函数
    function Preson(name, age) {
      this.name = name;
      this.age = age;
    }
    // 所有实例共享的公共方法
    Preson.prototype.say = function (word) {
      console.log(`${this.name}说：${word}`);
    }

    const p1 = new Preson('张三', 18); // 创建一个Person实例对象
    const p2 = new Preson('李四', 20); // 新创建一个Proson实例对象
    p1.say('hello world'); // 调用公共方法
    p1.hasOwnProperty('say') // false 说明不是定义在其本身上的
    p1.__proto__.do = function () {
      console.log('往原型对象中添加方法');
    }
    p2.do(); // 打印出了-往原型对象中添加方法

原型链的尽头

我们可以看到，实例对象的__proto__属性指向了一个构造函数的原型对象，该构造函数的原型对象的_proto_属性指向了Object的原型对象，而其Object的原型对象的_proto_属性指向了null，所以验证了原型链的尽头为null，这一说法。

JavaScript知识回顾

发表于 2021-05-04 更新于 2023-03-18 分类于 Web前端 Valine：
本文字数： 2.7k 阅读时长 ≈ 2 分钟

js回顾

js类构造方法:

构造方法**constructor** 是一种用于创建和初始化class创建的对象的特殊方法

在一个类中只能有一个名为“constructor”的特殊方法。一个类中出现多次构造函数 (constructor)方法将会抛出一个 SyntaxError 错误。

在一个构造方法中可以使用super关键字来调用一个父类的构造方法。

如果没有显式指定构造方法，则会添加默认的 constructor 方法。

如果不指定一个构造函数 (constructor) 方法，则使用一个默认的构造函数 (constructor)。

constructor链接

函数

1	const add = (a,b) => {}

对于派生类，默认构造函数是：
1
2
3
constructor(...args) {
  super(...args);
}

js原型链：

构造函数 - 继承机制

JS通过构造函数来生成实例。但是又出现了一个新的问题，在构造函数中通过this赋值的属性或者方法，是每个实例的实例属性以及实例方法，无法共享公共属性。所以又设计出了一个原型对象，来存储这个构造函数的公共属性以及方法。

我们可以看到，它的__proto__属性指向了一个function Function的原型对象，该原型对象为JS中所有函数的原型对象，而其__proto__属性也还是指向了function Object的原型对象，所以验证了原型链的尽头为null，这一说法。

在开发的时候，要注意不要通过实例对象去改变其构造函数的原型对象，这样会对其他通过该构造函数生成的实例对象造成影响。

Js原型链

super：

this关键词指向函数所在的当前对象
super指向的是当前对象的原型对象

ES6 规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例

Class中的 super()，它在这里表示父类的构造函数，用来新建父类的 this 对象

子类没有自己的this对象，而是继承父亲的this对象，然后进行加工。如果不调用super，子类就得不到this对象

ES5的继承，实质上是先创造子类的实例对象this，然后再将父类的方法添加到this上（Parent.call(this)）.
ES6的继承，需要先创建父类的this，子类调用super继承父类的this对象，然后再加工。

如果子类没有创建constructor，这个方法会被默认添加.

class Demo{
             
     constructor(x,y) {
         this.x = x;
         this.y = y;
     }
     
     customSplit(){
         return [...this.y]
     }
     
 }
 
 class Demo2 extends Demo{
     constructor(x,y){
         super(x,y);
     }
     
     customSplit(){
         return [...this.x]
     }
     
     task1(){
         return super.customSplit();
     }
     
     task2(){
         return this.customSplit();
     }
 }
 
 let d = new Demo2('hello','world');
 d.task1()    //["w", "o", "r", "l", "d"]
 d.task2()    //["h", "e", "l", "l", "o"]

super 在静态方法之中指向父类，在普通方法之中指向父类的原型对象

class Parent {
    static myMethod(msg) {
        console.log('static', msg);
    }
    myMethod(msg) {
        console.log('instance', msg);
    }
}
class Child extends Parent {
    static myMethod(msg) {
        super.myMethod(msg);
    }
    myMethod(msg) {
        super.myMethod(msg);
    }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

ES6的箭头函数写法:

//经典格式： 函数名 = ( 参数 ) => { 方法体 } 
const sum = (x,y)=>{ 
    return x+y; 
}
console.log(sum) 
 
//当方法体只有一行时，花括号可以省略： 
const sum1 = (x,y) => x+y;  
 
console.log(sum1) 
 
//当只有一个参数时，括号可以省略： 
const sum2 = x => { 方法体 }

* 箭头函数里是没有this的，只会向上一层寻找（可能是window）

* 箭头函数里是没有arguments的

* 箭头函数不能作为构造函数

***** 箭头函数不能定义原型下的方法

函数作用域：

函数定义方式通常需要显式的指定函数名称，在代码执行前就被解释器加载到作用域中，这个特性可以让我们在函数定义之前就调用该函数。

既然提到函数声明，就要提到函数的作用域。函数作用域是指在函数内声明的所有变量在函数体内始终是可见的，这意味着，变量在声明之前已经可用。这个特性可以被称为声明提前，即在函数体内声明的所有变量，在声明之前已经有定义，但只有在执行到这个变量时才会被真正赋值。

函数直接量表达式也是用到了关键字function。一般这种定义方式适用于将它作为一个大的表达式的一部分，比如在赋值和调用过程中定义函数。通过函数直接量生成的函数，函数名称可以省略，此时就是一个匿名函数。（匿名函数谨慎使用）

js函数的三种定义方式

这波又白给