美文网首页
JavaScript面向对象基础

JavaScript面向对象基础

作者: yy158125 | 来源:发表于2016-11-24 19:14 被阅读0次

    1、基本写法和组成

    var obj=new Object();//创建一个空的对象
    obj.name='a';            //属性
    obj.showName=function(){ //方法
        console.log(this.name);
    }
    obj.showName();
    var obj2=new Object();
    obj.name='b';            
    obj.showName=function(){ 
        console.log(this.name);
    }
    obj2.showName();
    

    2、工厂模式
    面向对象中的封装函数

    function People(name){ 
        //var obj={};//与new Object()相同
        var obj=new Object();
        obj.name=name;
        obj.showName=function(){
            console.log(this.name);
        }
        return obj;
    }
    var p1=People('a');
    p1.showName();
    var p2=People('b');
    p1.showName();
    

    new去调用一个函数的时候,这个函数中的this就是创建出来的对象,而且函数的返回值就是this(隐式返回),创建出来的对象叫做实例对象 var p1=new People('a'); p1就是创建出来的实例对象
    new后面调用的函数就是构造函数 new Arry() ,Arry()就是数组的构造函数

    function People(name){ 
        this.name=name;
        this.showName=function(){
            console.log(this.name);
        }
    }
    var p1=new People('a');
    p1.showName();
    var p2=new People('b');
    p2.showName();
    //p1 p2的构造函数是People
    

    3、对象的引用
    基本类型:赋值的时候只是值得复制
    对象类型:不仅是值得复制,而且也是引用的传递

    var a=5,b=a;
    b+=3;
    alert(a);  //5
    alert(b); //8
    var a=[1,2,3];
    var b=a;
    b.push(4);
    alert(a);  //[1,2,3,4]
    alert(b); //[1,2,3,4]
    var a=5, b=5;
    alert(a==b);//true   基本类型,值相同就可以
    var b=[1,2,3], c=[1,2,3];
    alert(b==c);//false  对象类型,值和引用都相同才可以
    

    4、prototype
    原型:改写对象下面公用的方法和属性,让公用的方法和属性在内存中存在一份
    prototype => class 普通方法 => style
    普通方法的优先级高于prototype

    var arr=[1,5,9];
    Arry.prototype.sum= function () {    
      var result=0;    
      for(var i=0;i<this.length;i++){       
         result+=this[i];    
      }   
       returnresult;
    };
    alert(arr.sum());
    arr.number=10;
    Arry.prototype.number=20;
    
    function People(name){ 
        this.name=name; 
    }
    People.prototype.showName=function(){
         alert(this.name);
    }
    var p1=new People('a');
    var p2=new People('b');
    p1.showName==p1.showName;  //true
    

    具体写法

    function 构造函数(){
         this.属性
    }
    构造函数.prototype.方法=function(){}
    

    面试题

    function C1(name){    
        if(name){        
           this.name=name;   
       }
    }
    function C2(name){    
        this.name=name;  
    }
    function C3(name){    
        this.name=name||'John';
    }
    C1.prototype.name='Tom';
    C2.prototype.name='Tom';
    C3.prototype.name='Tom';
    alert(new C1().name);//Tom
    alert(new C2().name);//undefined
    alert(new C3().name);//John
    

    JS是基于原型的程序

    var arr=[1,2,3];
    Array.prototype.push=function(){
        for(var i=0;i<arguments.length;i++){
            this[this.length]=this.arguments[i];
        }
        return this.length;
    }
    arr.push(4,5,6);
    

    5、包装对象
    基本类型会找到对应的包装对象类型,然后包装对象把所有的方法和属性给了基本类型,然后包装对象消失

    //var str=new String('hello');
    //alert(typeof str);//object
    //String.prototype.charAt= function () {};
    var str='hello';//str.charAt(1);
    String.prototype.lastValue=function(){    
        return this.charAt(this.length-1);
    };
    alert(str.lastValue());//o
    /*var str='hello';
    str.number=10;
    alert(str.number);//undefined*/
    

    6、面向对象中的一些属性和方法
    hasOwnProperty()看是不是对象自身下面的属性
    constructor()查看对象的构造函数,每个构造函数原型下都会有constructor属性 Aaa.prototype.constructor=function(){}

    var arr=[];
    arr.num=10;
    Array.prototype.num2=20;
    console.log(arr.hasOwnProperty('num'));//true
    console.log(arr.hasOwnProperty('num2'));//false
    
    function Aaa(){}
    Aaa.prototype.constructor=Aaa;//自动添加的属性
    var a1=new Aaa();
    console.log(a1.constructor);//Aaa
    arr.constructor//Array
    arr.constructor==Array   //true  判断数组
    var arr=[1,2,3];
    arr.toString()// '1,2,3'
    Array.prototype.toString=function(){
       return this.join('');
    }
    var num=20;
    num.toString(16)//转化成16进制
    //利用toString做类型的判断
    var arr=[];
    var json={};
    Object.prototype.toString.call(arr)// '[object Array]'
    Object.prototype.toString.call(json)// '[object object]'
    console.log(Object.prototype.toString.call(arr)=='[object Array]');//true
    
    window.onload=function(){
        var oF=document.createElement('iframe');
        document.body.appendChild(oF);
        var ifArray=window.frames[0].Array;
        var arr=new ifArray();
        console.log(Object.prototype.toString.call(arr)=='[object Array]');
        //true 
    }
    
    

    intanceof :运算符 对象与构造函数在原型链上是否有关系 可以做类型的判断

    function Aaa(){}
    var a1=new Aaa();
    console.log(a1 instanceof Aaa);//true
    console.log(a1 instanceof Object);//true
    console.log(a1 instanceof Array);//false
    

    toString() 把对象转成字符串 Object上的方法,系统对象下是自带的,自己写的对象都是通过原型链找的Object下面的

    function Aaa(){}
    var a1=new Aaa();
    a1.toString==Object.prototype.toString//true
    var arr=[];
    arr.toString==Object.prototype.toString//false
    

    7、继承
    继承:子类不影响父类,子类可以继承父类的一些功能(代码复用)拷贝继承:通用型 有new或无new都可以
    类式继承 new构造函数
    原型继承 无new的对象 {}等属性的继承:调用父类的构造函数,call/apply方法的继承:for in 拷贝继承

    相关文章

      网友评论

          本文标题:JavaScript面向对象基础

          本文链接:https://www.haomeiwen.com/subject/cwvbpttx.html