JS在构造函数内部和外部定义的函数方法的区别

前言

最近在学习数据结构，在学习树的时候，突然想起js的类的函数定义在构造函数内部和外部有什么区别，于是上网查了一下总结一下。

区别

• 在构造函数内定义的函数，会在类创建的实例的属性上，缺点是浪费内存，因为每次创建实例都会重复该函数。
• 在构造函数外定义的函数，会在类的属性上，在类创建的实例的原型上，实例可以调用该方法，看见一篇文，说这样只会创建一个函数，在类上，这样节约内存，实例在调用方法的时候，先从自身属性上查找，如果找不到，就会向上找。

class Demo {
    constructor(name){
        this.name=name;
        // 构造函数中定义函数，将会在每个实例中存在改函数的属性
        this.getNameIn = ()=>{
            console.log(this.name,'getNameIn')
        }

        // this.getNameOut = this.getNameOut.bind(this);
    }

    // 构造函数外面定义函数，将会存在这个实例的原型链上，实例遍历原型链获取改函数
    getNameOut (){
        console.log(this.name,'getNameOut')
    }

    // 此时注意的是写箭头函数，和在构造函数里面写一样，会绑定在实例的属性上。
    getName=()=>{
        console.log(this.name,'getNameOut')
    }


}

const demo1 = new Demo('Lillian');
const demo2 = new Demo('Lillian');

console.log(demo1.__proto__.getNameIn)
console.log(demo1.__proto__.getName)
console.log(demo1.__proto__.getNameOut)

console.log(demo1.getNameIn===demo2.getNameIn)
console.log(demo1.getNameOut===demo2.getNameOut)

console.log(Object.getOwnPropertyNames(demo1))

console.log(Demo.prototype)
console.log(Demo.prototype.getNameOut)

demo1.getNameIn();
demo1.getNameOut();

输出内容

注意

• 在构造函数外使用普通函数定义的方法，他会在类的属性上。
• 在构造函数外使用箭头函数定义的方法，他会在类的实例的属性上。