javascript高級（定義類、繼承、this、argument、觀察者）

//javascript高級話題

console.log("hello world!");
//一.常用js類定義的方法有哪些
//1. 構造方法定義類
function Person(){
    this.name = "fan bb";
}

Person.prototype.sayName = function () {
    //alert(this.name);
    console.log(this.name);
}

var person = new Person();
person.sayName();

//2.對象方法定義類
var Person = {
    name:"li bb",
    sayName:function () {
        console.log("my name is .." + this.name);
    }
}

var person = Object.create(Person);
person.sayName();

//=========================================================================================
console.log("2--------------------------------");
//二、js類繼承的方法有哪些
//0） 自己寫的繼承方法
//構造方法定義類 Animal
function Animal(){
    this.name = "animal";
}
//增加Animal 類的原型屬性sayName
Animal.prototype.sayName = function(){
    console.log(this.name);
}

//構造方法定義類 Person
function Dog(){
    //this.name = "personnn";
}

//Person類繼承Animal
Dog.prototype = new Animal();
//(1) 原型鏈法：例子中增加的寫法
//Dog.prototype = Animal.prototype;
Dog.prototype.constructor = "Dog" //更新構造函數，構造函數恢復自己的Person


//創建person對象
var dog = new Dog();
dog.sayName();


//------------------------------
//2.屬性自制法， 遍歷父類的原型屬性， 將父類的原型屬性 複製到子類這邊，並且最後要恢復子類原型屬性中的 構造函數屬性

function Cat() {
    this.name = "this is Cat't Name"
}

(function () {
    var n = 0;
    for(everyKey in Animal.prototype)
    {
        Cat.prototype[everyKey] = Animal.prototype[everyKey];
        n++;
        console.log("is have prototype " + n + everyKey);
    }

    //只是繼承了Animal中的prototype屬性。
    //name 屬性沒有被繼承
})();

Cat.prototype.constructor = "Cat";

var cat = new Cat();
cat.sayName();
//=========================================================================================
//三、js類 多重繼承的實現方式  就是複製所有基類的 prototype屬性
//=========================================================================================
console.log("4--------------------------------");
//四、js裏的作用域是什麼樣子的？
//大多數語言的作用域都是{}  , js裏面不是 ， js裏面是函數作用域。
var globalVar = 'global var';

(function testGlobalVar() {
    console.log(globalVar); //undefine ,因爲global在函數內定義了，導致全乎的global失效
    var globalVar =  "jububianliang";
    console.log(globalVar);
})();
//testGlobalVar();
console.log(globalVar);
//=========================================================================================
//五、js裏面的this指的是什麼？
//this指的是調用對象本身
console.log("5--------------------------------");
function funTestthisObject() {

}
funTestthisObject.prototype.sayName = function () {
    console.log(this.name);
}

var funTestthisObj = new funTestthisObject();
funTestthisObj.name = "what's this \"this\"";

funTestthisObj.sayName();

//=========================================================================================
//六、apply call bind
//三者都可把一個函數應用到其他對象上，注意不是自身對象。
//apply call是直接進行調用; apply接受數組做參  call接受多個參數 參數間逗號分隔
//bind 是綁定 ，執行需要再次調用
console.log("6--------------------------------");
//構造函數
function apply_Call_Bind_test()
{

}

apply_Call_Bind_test.prototype.sayName = function () {
    console.log("---");
    console.log(this.name);
    console.log("-");
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments[3]);
    console.log("---");
}

var other_apply_Call_bind_test_obj = {
    name : "first usally obj name"
};

var obj_1 = {
    name :"obj_1",
    age :11
};
var obj_2 = {
    name :"obj_2"
};
var obj_3 = {
    name :"obj_3"
};

function obj_4(){
    this.name = "bij_4";
}

apply_Call_Bind_test.prototype.sayName.apply(other_apply_Call_bind_test_obj,[obj_2,obj_3,obj_1, 1212]);
apply_Call_Bind_test.prototype.sayName.call(other_apply_Call_bind_test_obj,"ning an1","ning an2");
var bind_obj = apply_Call_Bind_test.prototype.sayName.bind(other_apply_Call_bind_test_obj);
bind_obj("fengxiang1", "fengxiang2");
bind_obj(["fengxiang3", "fengxiang4",obj_4]);

//=========================================================================================
console.log("7--------------------------------");
//七、caller,callee和arguments 分別都是什麼？
//caller callee 調用者和被調用者
//argument 包含函數所有參數的  參數數組變量

function  Caller_callee(par1,par2,par3) {
    child(par1,par2,par3);
}
function child(p1, p2, p3) {
    console.log(p1);
    console.log(arguments);
    console.log(child.caller);
    console.log(arguments.callee);
}

Caller_callee("callp1","callp2","");
//=========================================================================================
//八、閉包
//=========================================================================================
//九、
//Object.defineProperty(obj,prop,descriptor); 用於給obj對象定義屬性
//hasOwnProperty 檢查屬性是否存在於對象的本身 ，繼承來的不算
//isEnumberable 用於檢測某一屬性是否可以遍歷（枚舉出來  for（屬性 in 對象））

//十、js常用設計模式的實現思路，單例，工廠，代理裝飾，觀察者模式
console.log("10--------------------------------");
//任意對象都是單例
var singleObj = {
    name:"wang wi",
    age :99
};
//---------------------
//工廠，就是同樣形式參數返回不同的實例
function inStance_one() {
   this.name = "the one";
   console.log("是否構造了")
}

function inStance_two() {
    this.name = "the two";
}

function Factory() {

}

Factory.prototype.getInstance = function (className) {
    return eval('new '+ className + '()');
}

var factory = new Factory();
console.log(factory.getInstance("inStance_one").name);
console.log(factory.getInstance("inStance_two").name);

//---------------------

//代理：就是新建個類 調用老類的接口，包一下、
function old_Obj(){}
old_Obj.prototype.sayName = function () {
    console.log("Micha");
}
old_Obj.prototype.sayAge = function () {
    console.log(300);
}

function old_Obj_proxy(functionName) {
    //代理類屬性 增加老類的實例，這樣就能調用老類的接口了
    this.old_o = new old_Obj();
    //傳遞this
    var that = this;
    this.callMethod = function(functionName){
        console.log('before proxy:', functionName);
        //新類調用老類的接口
        that.old_o[functionName]();
        console.log('after proxy:', functionName);
    }
}
var pp = new old_Obj_proxy();
pp.callMethod('sayName');
pp.callMethod('sayAge');


//---------------------
//觀察者：就是事件模式，比如按鈕的onclick這樣的應用
console.log("觀察者模式，把一個對象（信息）， 通知給其他對象");
//構造方法 定義發佈者類
function Publisher(){
    //增加一個監聽屬性,用來壓入想要壓入對象的集合
    this.listeners = [];
}

Publisher.prototype = {
    //增加監聽方法
    'addListener':function(listener){
        //其實先前可以加入判斷，如果該對象未被監聽則壓入
        this.listeners.push(listener);
    },
    //增加刪除監聽方法
    'removeListener':function (listener) {
        delete this.listeners[listener];
    },

    //增加通知方法
    'notify':function(obj){

        for(var i = 0; i < this.listeners.length; i++)
        {
            var listener = this.listeners[i];
            if (typeof listener != "undefined") {
                //發一個對象給所有監聽者
                listener.process(obj);
            }
        }
    }

};

//構造方法定義 訂閱者（監聽者）類
function Subscriber() {

}

Subscriber.prototype = {
    'process':function(obj){
        console.log(obj);
    }
};

var publisher = new Publisher();
publisher.addListener(new Subscriber());
publisher.addListener(new Subscriber());

publisher.notify({name: "huaha", age:16});
publisher.notify("nimabn");