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");