原生js里的OOP及其js里this的理解

ES6之前 的 原生js里的OOP

//虽说以后es6 es7是趋势

//但是目前而言还是可能用到


    //ES6之前 的 原生js里的OOP  //目前而已还是会经常用到

    //常规函数直接量赋值给一个变量 与 直接定义有名function a(){} 几乎是一个意思
    /*
     *函数直接量的立即执行表达式
     *!(function(win){})(window) 其实win是形参 window实参代入 比如jquery就是封装成立window.jquery 或 window.$的 然后可以在里面业务逻辑用到
     */

    var utils = function(){
        this.data={
            Index: 0,
            loadingHidden: false,
        };
        this.config = {
            'base_url':'www.xxx.com',
        };
        this.define = function(){
            return  'this is parent define';
        };
        this.showBlog = function(){
            return  'this is parent function showblog';
        };
    }

    //父类利用原型对象实现 类的属性和方法的定义
    utils.prototype.cache = {
          modules: {}
    };
    utils.prototype.use = function (){
          return 'this is class use function';
    };


    var sum = function(a,b){
        // var that = this;
        utils.apply(this);
        //如sum 继承 父类函数对象 util
        //但是父类原型对象prototype却无法继承
        //参数1写this  this指针指向父类this 从而可以实现一些逻辑  也是apply的优点 子类可以向父类构造函数(如果父类有构造函数)传参

        this.showBlog = function (){ //父类里面直接定义的方法 在这里重新 prototype在外面重写
            return 'this is rewrite showblog';
        }

    };

    // sum.prototype = utils.prototype; //apply无法继承父类原型对象 故采用将父类prototype赋值给子类 实现继承

    sum.prototype.use = function (){
        return 'this is rewrite class use';
    }

    //新增子类原型对象方法
    sum.prototype.img = function (url, callback, error){ //图片预加载
        var img = new Image();
        img.src = url;
        if(img.complete){
          return callback(img);
        }
        img.onload = function(){
          img.onload = null;
          typeof callback === 'function' && callback(img);
        };
        img.onerror = function(e){
          img.onerror = null;
          typeof error === 'function' && error(e);
        };
    };


    //无论是函数父类对象 无聊有没有定义prototype原型对象的方法和属性 无论是否用 apply继承父对象 都需要用new实例化后才能使用

    sum  =  new sum(10,20);

    console.log(sum);

    //小结 实际简单开发在我看来不需要原型对象 直接父类函数定义属性和方法  然后 apply继承到属性和 方法 就可以完成单继承 OOP了0.0 当然也可以用prototype 函数的原型对象

    /*
     *  关于apply用法 this指针会指向父类  call方法是第二个参数的区别
     *  call方法:
        语法 fun.call(thisArg[, argsArray])

        thisArg是在fun函数运行时指定的this值。需要注意的是下面几种情况:

        (1)不传,或者传null,undefined,函数中的this指向window对象
        (2)传递另一个函数的函数名,函数中的this指向这个函数的引用,并不一定是该函数执行时真正的this值
        (3)值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象,如 String、Number、Boolean
        (4)传递一个对象,函数中的this指向这个对象
     *
     *  argsArray 数组或类数组对象 如果父类有 arguments
     */
js四种函数调用方式
JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式

1. 方法调用模式:

var blogInfo={
  blogInfo:123,
  showBlog:function(){alert(this.blogId);}
};

//上述写法 无需new 实例化 直接就可以调用 这个我开房常用 也可以理解成上面语句已经自动new 实例化了

blogInfo.showBlog();

2.函数调用模式
定义一个函数,设置一个变量名保存函数,这时this指向到window对象。

	最普通的方式 a(){#code} a();//调用

3.类(使用函数定义)及其使用必须 用new实例化

var myfunc = function(a){
  this.a = a;
};
myfunc.prototype = {
  show:function(){alert(this.a);}
}
 
var newfunc = new myfunc("opq");
newfunc.show();

4.apply,call调用模式
var myobject={
	return a-b;
};
var sum = function(a,b){
  return a+b;
};

var sum2 = sum.call(myobject,10,30);
alert(sum2);


this的理解

只能存在于对象里 js的话 也就是函数里面 es6 class语法 就是只在class里面 这点我想语言上面是共通的

特别注意的就是普通函数 this 是指向window 0.0

记录你我
请先登录后发表评论
  • latest comments
  • 总共0条评论