[js]js設計模式-修改原型

參考

操做原型

- 給原型添加屬性
    - 方法1: Fn.prototype.sum=function{}
    - 方法2: Fn.prototype={} //constructor指向了Object的原型

- 修改原型既有的屬性:
    f1.__proto__.sum//ie禁止
    Fn.prototype.sum

// 批量設置共有屬性和方法

function Fn() {
    this.x = 100;
}

// 1,逐一添加法
// Fn.prototype.getX = function () {
//
// };
// Fn.prototype.getY = function () {
//
// };
// Fn.prototype.getZ = function () {
//
// };

// var pro = Fn.prototype;
// pro.getX = function () {
//
// };
// pro.getY = function () {
//
// };
// pro.getZ = function () {
//
// };

var f1 = new Fn();

// 2.重構原型方法
Fn.prototype = {
    constructor: Fn, // 若是不指定.就會變成object,而非本函數
    a: function () {

    },
    b: function () {

    }
};
console.log(Fn.prototype.constructor === Fn);
console.log(f.constructor);



// function Fn() {
//     this.x = 100;
// }
//
// Fn.prototype = {
//     a: function () {
//
//     }
// };
//
// var f = new Fn();
// console.log(f.constructor);

function Fn() {
    this.x = 100;
    this.sum = function () {
    }
}

Fn.prototype.getX = function () {
    console.log(this.x);
};

p2 = new Fn;//若是無參數可不加()

// console.log(Fn);
// console.log(Fn.prototype);
// console.log(Fn.prototype.constructor);
// console.log(Fn.prototype.constructor === Fn);
// x 是f1的一個屬性
console.log(f1.hasOwnProperty("x"));

/*
* 3.原型鏈模式
* 3.1 先在私有做用域查找
*     console.log(f1.hasOwnProperty("x"));
* 3.2 原型上定義的屬性和方法都是共有方法
* */

f1.getX === f2.getX;
f1.__proto__.getX === f2.getX;
f1.getX === f2.__proto__.getX;
f1.getX === Fn.prototype.getX;

console.log(f1.sum === Fn.prototype.sum);

// f1.hasOwnProperty -->f1.__proto__.__proto__.hasOwnProperty();

f1.sum = function () {
    //修改私有的sum
};

f1.__proto__.sum = function () {
    //修改所屬類原型上的sum  ie瀏覽器不容許這樣作
};


Fn.prototype.sum = function () {
    // 修改公有的sum
};

給內置類增長數組去重方法

<script>
    //2,給內置類增長數組去重方法
//    Array.prototype.unique = function () {
//
//    };

    // 這種方法被瀏覽器屏蔽掉了
    Array.prototype = {
        constructor: Array,
        unique: function () {

        }
    };
    console.log(Array.prototype);

    Array.prototype.sort=function () {
      console.log(this);
    };
    var ary = [1,2,3,4,5];
    ary.sort();
    console.log(ary);
</script>

給原型添加數組去重方法

<script>
    function Fn() {
        this.x = 100;
        this.y = 200;
        this.getY = function () {
            console.log(this.y)
        }
    }

    Fn.prototype = {
        constructor: Fn,
        y: 300,
        getX: function () {
            console.log(this.x)
        },
        getY: function () {
            console.log(this.y)
        }
    };
    var f = new Fn();
    f.getX();           //100  調用私有做用域的
    f.__proto__.getX(); //undefinded
    f.__proto__.getY(); //300 調用原型上的, f.__proto__.y   1.看前面的.  2,替換 3,按照原型鏈模式去查找

    /**
     * 1,this是誰
     *  this.xxx= xxx, this是實例自己.
     *  getX=function(){} this看前面的點   1.看前面的.  2,替換 3,按照原型鏈模式去查找
     *
     *
     */
//    Fn.prototype.getZ();

    // 2,數組的鏈式寫法,  return this;
    // 區別this
    Array.prototype.myUnique = function () {
        obj = {};
        for (var i = 0; i < this.length; i++) {
            var cur = this[i];
            if (obj[cur] == this[i]) {
                this[i] = this[this.length - 1];
                this.length--;
                i--;
                continue;
            }
            obj[cur] = cur;
        }
        obj = null;
        return this; // 用於鏈式書寫, 由於前者的結果也是一個數組.
    };
    var arr = [1, 2, 2, 3, 3, 4, 4, 4, 4];
    arr.myUnique().pop();             // this -> arr
    //    Array.prototype.myUnique(); // this -> Array.prototype.
    console.log(arr);
</script>