JavaScript ES6 類和對象 簡單記錄

一
/*
1.在ES6以前若是定義一個類?
經過構造函數來定義一個類
*/

        function Person(myName, myAge) {
            // 實例屬性
            // this.name = "lnj";
            // this.age = 34;
            this.name = myName;
            this.age = myAge;

            // 實例方法
            this.say = function () {
                console.log(this.name, this.age);
            }
            // 靜態屬性
            Person.num = 666;
            // 靜態方法
            Person.run = function () {
                console.log("run");
            }
        }
        // let p = new Person();
        let p = new Person("zs", 18);
        p.say();
        console.log(Person.num);
        Person.run();

/*
2.從ES6開始系統提供了一個名稱叫作class的關鍵字, 這個關鍵字就是專門用於定義類的
*/

  class Person{
            // 當咱們經過new建立對象的時候, 系統會自動調用constructor
            // constructor咱們稱之爲構造函數
            constructor(myName, myAge){
                this.name = myName;
                this.age = myAge;
            }
            // 實例屬性
            // name = "lnj";
            // age = 34;
            // 實例方法
            say(){
                console.log(this.name, this.age);
            }
            // 靜態屬性
            static num = 666;
            // 靜態方法
            static run() {
                console.log("run");
            }
        }
        // let p = new Person();
        let p = new Person("zs", 18);
        p.say();
        console.log(Person.num);
        Person.run();

須要注意的地方：

1 

class Person{
            // 如下定義"實例屬性"的方式並非ES6正式版標準中的寫法, 大部分的瀏覽器不支持
            // 在ES6標準中添加實例屬性都須要在constructor中添加
            // 實例屬性
            // name = "lnj";
            // age = 34;
            constructor(){
                this.name = "lnj";
                this.age = 34;
            }
            // 實例方法
            say(){
                console.log(this.name, this.age);
            }
        }
        let p = new Person();
        console.log(p);

2 

 class Person{
            // 如下定義"靜態屬性"的方式並非ES6正式版標準中的寫法, 大部分的瀏覽器不支持
            // 在ES標準中static只支持定義靜態方法不支持定義靜態變量
            // 靜態屬性
            // static num = 666;

            // 靜態方法
            static run() {
                console.log("run");
            }
        }
        Person.num = 666;
        let p = new Person();
        console.log(p);

 

二

function Person(myName, myAge) {
            // 實例屬性
            this.name = myName;
            this.age = myAge;
            // 實例方法
            
            this.hi = function () {
                console.log("hi");
            }
        }
        // 原型上的方法
        Person.prototype.say = function () {
            console.log(this.name, this.age);
        }
        let p = new Person("lnj", 34);
        console.log(p);


        class Person{
            constructor(myName, myAge){
                this.name = myName;
                this.age = myAge;
              //構造函數裏面添加的方法會添加到 對象自己
                this.hi = function () {
                    console.log("hi"); }
            }
            //在類裏面添加的方法會加到原型對象中
            say(){
                console.log("hi"); }
        }
        let p = new Person("lnj", 34);
        console.log(p);

四

注意點:
若是經過class定義類, 那麼不能自定義這個類的原型對象
若是想將屬性和方法保存到原型中, 只能動態給原型對象添加屬性和方法

 function Person(myName, myAge) {
            // 實例屬性
            this.name = myName;
            this.age = myAge;
            // 實例方法
            this.hi = function () {
                console.log("hi");
            }
        }
        // 原型上的方法
        // Person.prototype.type = "人";
        // Person.prototype.say = function () {
        //     console.log(this.name, this.age);
        // };
        //function方式定義的構造函數能夠修改 原型對象
        Person.prototype = {
            constructor: Person,
            type: "人",
            say: function () {
                console.log(this.name, this.age);
            }
        };


        class Person{
            constructor(myName, myAge){
                this.name = myName;
                this.age = myAge;
                this.hi = function () {
                    console.log("hi");
                }
            }
            run(){
                console.log("run");
            }
        }
        // Person.prototype.type = "人";
        // Person.prototype.say = function () {
        //     console.log(this.name, this.age);
        // };

        let obj = {
            constructor: Person,
            type: "人",
            say: function () {
                console.log(this.name, this.age);
            }
        };
        //修改對象原型無效
        Person.prototype = obj;

        let p = new Person("lnj", 34);
        console.log(p);

五  繼承

 ES6以前的繼承
 1.在子類中經過call/apply方法藉助父類的構造函數
 2.將子類的原型對象設置爲父類的實例對象

function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
        }
        Person.prototype.say =  function () {
            console.log(this.name, this.age);
        }
        function Student(myName, myAge, myScore) {
            // 1.在子類中經過call/apply方法藉助父類的構造函數
            Person.call(this, myName, myAge);
            this.score = myScore;
            this.study = function () {
                console.log("day day up");
            }
        }
        // 2.將子類的原型對象設置爲父類的實例對象
        Student.prototype = new Person();
        Student.prototype.constructor = Student;

        let stu = new Student("zs", 18, 99);
        stu.say();

1.在ES6中如何繼承
1.1在子類後面添加extends並指定父類的名稱
1.2在子類的constructor構造函數中經過super方法藉助父類的構造函數

class Person{
            constructor(myName, myAge){
                // this = stu;
                this.name = myName; // stu.name = myName;
                this.age = myAge; // stu.age = myAge;
            }
            say(){
                console.log(this.name, this.age);
            }
        }
        /*
        1.在ES6中如何繼承
        1.1在子類後面添加extends並指定父類的名稱
        1.2在子類的constructor構造函數中經過super方法藉助父類的構造函數
        */
        // 如下代碼的含義: 告訴瀏覽器未來Student這個類須要繼承於Person這個類
        class Student extends Person{
            constructor(myName, myAge, myScore){
                // 1.在子類中經過call/apply方法藉助父類的構造函數
                // Person.call(this, myName, myAge);
                super(myName, myAge);
                this.score = myScore;
            }
            study(){
                console.log("day day up");
            }
        }
        let stu = new Student("zs", 18, 98);
        stu.say();

六  獲取對象類型

 let obj = new Object();
        console.log(typeof obj); // object

        let arr = new Array();
         /*
         * 這樣的打印會是object，這是由於 在全部構造函數中，內部其實會新建一個Object對象，而後賦值給this
         * */
         console.log(typeof arr); // object
        console.log(arr.constructor.name); // Array


        function Person() {
            // let obj = new Object();
            // let this = obj;
            this.name = "lnj";
            this.age = 34;
            this.say = function () {
                console.log(this.name, this.age);
            }
            // return this;
        }
        let p = new Person();
        // console.log(typeof p); // object
        console.log(p.constructor.name); // Person

七 instanceof 關鍵字

1.什麼是instanceof關鍵字?
instanceof用於判斷 "對象" 是不是指定構造函數的 "實例"

   2.instanceof注意點

只要 構造函數的原型對象出如今實例對象的原型鏈中都會返回true

 class Person{
            name = "lnj";
        }
        let p = new Person();
        console.log(p instanceof Person); // true

        class Cat{
            name = "mm";
        }
        let c = new Cat();
        console.log(c instanceof Person); // false


        function Person(myName) {
            this.name = myName;
        }
        function Student(myName, myScore) {
            Person.call(this, myName);
            this.score = myScore;
        }
        Student.prototype = new Person();
        Student.prototype.constructor = Student;

        let stu = new Student();
        /*
        * 返回true的緣由爲 Person的原型對象出如今了stu的原型鏈上
        * */
        console.log(stu instanceof Person); // true

 

八 isPrototypeOf

1.什麼是isPrototypeOf屬性
isPrototypeOf用於判斷 一個對象是不是另外一個對象的原型

2.isPrototypeOf注意點
2.1只要調用者在傳入對象的原型鏈上都會返回true

 class Person{
            name = "lnj";
        }
        let  p = new Person();
        console.log(Person.prototype.isPrototypeOf(p)); // true

        class Cat{
            name = "mm";
        }
        console.log(Cat.prototype.isPrototypeOf(p)); // false
        

        function Person(myName) {
            this.name = myName;
        }
        function Student(myName, myScore) {
            Person.call(this, myName);
            this.score = myScore;
        }
        Student.prototype = new Person();
        Student.prototype.constructor = Student;

        let stu = new Student();
        console.log(Person.prototype.isPrototypeOf(stu)); // true

八 判斷某一個對象是否擁有某一個屬性

// 需求: 判斷某一個對象是否擁有某一個屬性
        class Person{
            name = null;
            age = 0;
        }
        Person.prototype.height = 0;
        
        let p = new Person();
        // in的特色: 只要類中或者原型對象中有, 就會返回true
        console.log("name" in p); // true
        console.log("width" in p); // false
        console.log("height" in p); // true
        

        // 需求: 判斷某一個對象自身是否擁有某一個屬性
        let p = new Person();
        // 特色: 只會去類中查找有沒有, 不會去原型對象中查找
        console.log(p.hasOwnProperty("name")); // true
        console.log(p.hasOwnProperty("height")); // false

九 深拷貝和淺拷貝

1.什麼是深拷貝什麼是淺拷貝?
1.1深拷貝
修改新變量的值不會影響原有變量的值
默認狀況下基本數據類型都是深拷貝

1.1淺拷貝
修改新變量的值會影響原有的變量的值
默認狀況下引用類型都是淺拷貝

萬能深拷貝方法

class Person{
            name = "lnj";
            cat = {
                age : 3
            };
            scores = [1, 3, 5];
        }
        let p1 = new Person();
        let p2 = new Object();
        /*

        // p2.name = p1.name;
        // p2.name = "zs";
        // console.log(p1.name);
        // console.log(p2.name);
        p2.cat = p1.cat;
        p2.cat.age = 666;
        console.log(p1.cat.age);
        console.log(p2.cat.age);
        */

        depCopy(p2, p1);
        // console.log(p2);

        p2.cat.age = 666;
        console.log(p1.cat.age);
        console.log(p2.cat.age);

        function depCopy(target, source) {
            // 1.經過遍歷拿到source中全部的屬性
            for(let key in source){
                // console.log(key);
                // 2.取出當前遍歷到的屬性對應的取值
                let sourceValue = source[key];
                // console.log(sourceValue);
                // 3.判斷當前的取值是不是引用數據類型
                if(sourceValue instanceof Object){
                    // console.log(sourceValue.constructor);
                    // console.log(new sourceValue.constructor);
                    let subTarget = new sourceValue.constructor;
                    target[key] = subTarget;
                    depCopy(subTarget, sourceValue);
                }else{
                    target[key] = sourceValue;
                }
            }
        }