js es5和es6 有关类的阐述

JS 类

es6之前 类 的定义

   class Start {
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            sing() {
                console.log("我会唱歌");
            }
        }
        var ldh = new Start("刘德华", 20);
        ldh.sing();
        console.log(ldh.age);

1、通过关键字Class 定义一个Start类
2、实例对象是通过new Start()
3、Class是生产对象的一个模板，抽取了对象的公共属性。

es5 类

在es5之前还没有class关键字，是通过构造函数来实例一个对象。

        function Start(uname, age) {
            this.uname = name;
            this.age = age;
            this.sing = function() {
                console.log("我会唱歌");

            }

        }

        var ldh = new Start("刘德华", 22);
        ldh.sing();

在es5版本的时候，会在内存中产生一个空对象，通过this会把成员指向这个空对象，对象通过.调用。es5没有class关键字是通过构造函数来生产对象。为了减少内存空间，在构造函数中有些成员方法是可以共享，代码块是一样的，为了解决这个问题，在构造函数中就产生原型对象这个概念。

 var ldh = new Start("刘德华", 22);
    var zxy = new Start("张学友", 29);
     console.log(ldh.sing === zxy.sing);

---

 Start.prototype.dance = function() {
        console.log("我会跳舞");

    }
    var ldh = new Start("刘德华", 22);
    var zxy = new Start("张学友", 29);
    //console.log(ldh.sing === zxy.sing);


    console.log(ldh.dance === zxy.dance);

---

通过原型对象定义的函数dance，比较ldh.dance和zxy.dance 输出true，证明ldh和zxy的dance函数是同一个，也就是说他们在内存中的地址是一样的。
原型对象本身也是一个对象，可通过对象字面量来定义共享方法，但是有一个弊端，会把原型对象之前的属性和方法覆盖。

console.log(Start.prototype);
console.log(ldh.proto);

---

---

Start.prototype = {
dance: function() {
console.log(“我会跳舞”);
}
}

    console.log(Start.prototype);

---

由图片可见，如果是通过字面量的形式，会将Start的构造函数给覆盖，有的时候会通过手动调用的方法，重新将构造函数写进对象里面。

实例变量和静态变量

1、实例变量是指在构造函数中，通过this所指向的变量。
2、静态变量是通过类名指向的变量。

this指向问题

1、在类中，this所指向的是实例对象。
2、在成员方法中，this所指向的是调用它，可能是变量也可能是对象。

笔者也是初学者，本文所阐述的有什么问题，希望能够指正。

本文地址：https://blog.csdn.net/qq_44869984/article/details/107250977