面向对象关于函数以及this的问题

Posted admin-NaN

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了面向对象关于函数以及this的问题相关的知识,希望对你有一定的参考价值。

函数在js中扮演的角色
    1、普通函数
    function foo(){
        console.log(1);
    }
    foo();
    2、构造函数
    function Foo(){
        this.day=function(){
            console.log(2);
        }
 
    }
    var foo1=new Foo();
    foo1.day();
    3、作为对象
    foo.abc=3;
    console.log(foo.abc);

 
     函数产生方式
    1、内置函数
    2、自定义函数(有三种)
    (1)函数声明(可以先调用后声明)
    f1();
    function f1(){
        console.log(1);
    }
    (2)函数表达式
    var f2=function (){
        console.log(1);
    };
    f2();
    (3)new Function()一般用不到
    var f3=new Function(‘console.log(1);‘);
    f3();
 

 
      函数的调用方法
    1、构造函数实例化
    function Foo(name){
        this.name=name;
    }
    var foo2=new Foo(‘lisi‘);
    console.log(foo2.name);
    2、普通函数调用
    function foo(){
        console.log(1);
    }
    foo();
    3、对象方法调用
    var obj={};
    obj.show=function(){
        console.log(1);
    }
    obj.show();
    4、call和apply方法
    var a=1;
    var b=2;
    function foo(n){
        console.log(this.a+this.b+n);
    }
    foo(3);
    foo.call({a:3,b:4},5);
    foo.apply({a:6,b:7},[8]);
    5、函数的立即调用
    (function (){console.log(1);})();
    (function(){console.log(1);}());

 
     call以及apply的用法
    1、调用函数
    function foo(n){
        console.log(n);
    }
    foo(1);
    foo.call(null,2);
    foo.apply(null,[3]);
    2、改变所调用的函数的内部的this值的指向
    var a=1;
       function foo(b){
           console.log(this.a+b);
       }
       foo(2);
       foo.call({a:3},4);
       foo.apply({a:5},[6]);
       3、借用其他对象的方法
       var arr=[12,34,6,32,12,43];
       var ret=Math.max.apply(null,arr);
       console.log(ret);
    4、把类数组转换成数组
    var obj={0:‘1‘,1:‘2‘,length:2};
    var ret=[].slice.call(obj);
    console.log(ret);
 

 
   我们常见的类数组
    1、document.getElementsByTagName(‘‘);
    2、jQuery的实例的本质就是类数组
    3、arguments本质就是类数组.注意:arguments包括的是所有实参
    function fr(a,b,c){
        console.log(arguments);
    }
    fr(1,23,4,5,6);
 

高阶函数
    1、作为参数的函数(回调函数)
    function foo(param){
        var str=‘{"username":"lisi","age":"12"}‘;
        param.change(str);
    }
    foo({
        abc:123,
        change:function(data){
            data=JSON.parse(data);
            console.log(data.username);
        }
    })
    2、作为返回值的函数(闭包)
    var fn=(function(){
        return function(){
            console.log(1);
        }
    })();
    fn();
     3、关于高阶函数自动排序的案例
 
    var data = [{
        name : ‘tom‘,
        age : 12,
        price : 30
    },{
        name : ‘jerry‘,
        age : 15,
        price : 30
    },{
        name : ‘spike‘,
        age : 19,
        price : 80
    },{
        name : ‘kitty‘,
        age : 10,
        price : 10
    },{
        name : ‘tiger‘,
        age : 13,
        price :50
    }];
    function sortRuler(sortFlag){
        return function (o1,o2){
            var v1=o1[sortFlag];
            var v2=o2[sortFlag];
            if(v1>v2){
                return 1;
            }else if(v1<v2){
                return -1;
            }else {
                return 0;
            }
        };
    };
    var st=sortRuler(‘age‘);
    data.sort(st);
    console.log(data);

关于this的问题
 

关于this:this到底指向谁取决于函数调用的方式
    this出现的场景
    1、普通函数当中的this(在非严格模式下this指的是window,但是在严格模式下this的值是undefined)
    严格模式:对语法规则要求更加严格("use strict")
    function foo(){
        "use strict"
        console.log(this);
    }
    foo();
    2、构造函数中的this以及原型中的this
    构造函数中的this与原型方法中的this指向相同,都是指向实例对象
    function Student(name,age){
        this.name=name;
        this.age=age;
    }
    Student.prototype.stu=function(){
        console.log(this.name);
    };
    var ste=new Student(‘isi‘,‘12‘);
    console.log(ste.name);
    ste.stu();
    3、实例对象中的this
    对象方法中的this就是方法的调用者
    var obj={
        info:‘hello‘,
        showInfo:function(){
            console.log(this.info);
        }
    };
    obj.showInfo();
    4、定时函数中的this
    定时函数中的this就是window
    setInterval(function(){
        console.log(this);
    }, 100);
    5、事件函数中的this
    这里的this是指绑定事件的对象(这里的btn是一个按钮的id)
    onload=function(){
        var btn=document.getElementById(‘btn‘);
        btn.onclick=function(){
            console.log(this);
        }
    };
    何时需要缓存this?
    当this 的指向发生改变的时候(这里的btnId是一个按钮的id,这里的dvId是一个div的id)
    onload=function(){
        function ChangeColor(btnId,dvId){
            this.btn=document.getElementById(btnId);
            this.dv=document.getElementById(dvId);
        }
        ChangeColor.prototype.change=function(){
            var that=this;
            this.btn.onclick=function(){
                that.dv.style.backgroundColor=‘blue‘;
            };
        };
        var cha=new ChangeColor("btn","dv");
        cha.change();
    };

关于html代码
 <div id="dv" style="height:100px;width:100px"></div>
    <input type="button" value="按钮" id="btn">

以上是关于面向对象关于函数以及this的问题的主要内容,如果未能解决你的问题,请参考以下文章

关于JS面向对象中原型和原型链以及他们之间的关系及this的详解

面向对象的封装继承多态以及构造函数

Javascript面向对象:构造函数的继承

Javascript面向对象编程--- 构造函数的继承

Javascript 面向对象编程2:构造函数的继承

关于PHP面向对象中—类的定义与对象的实例化操作以及构造析构函数的特殊用法