zoukankan      html  css  js  c++  java
  • JS面向对象的学习

    1、面向对象

    var arr = new Array();    //[] //我们把系统自带的对象,叫做系统对象
    
    
    
    var arr = [];  
    arr.number = 10;        //对象下面的变量:叫做对象的属性
    arr.test = function(){  //对象下面的函数 : 叫做对象的方法
        alert(123);
    };

    2、面向对象的转变

    var obj = new Object();  //创建了一个空的对象
    obj.name = '小明';  //属性
    obj.showName = function(){  //方法
        alert(this.name);
    };
    
    obj.showName();
    
    
    var obj2 = new Object();  //创建了一个空的对象
    obj2.name = '小强';  //属性
    obj2.showName = function(){  //方法
        alert(this.name);   //函数中的this指的是什么,一般是看函数调用时,函数前面的东西,若无则指的是window,若像下面obj2.showName();则指的是obj2
    }; 
    obj2.showName();
    //工厂方式 : 封装函数
    
    function createPerson(name){
        
        //1.原料
        var obj = new Object();
        //2.加工
        obj.name = name;
        obj.showName = function(){
            alert( this.name );  
        };
        //3.出场
        return obj;
        
    }
    
    var p1 = createPerson('小明');
    p1.showName();
    var p2 = createPerson('小强');
    p2.showName();
    //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
    
    //new后面调用的函数 : 叫做构造函数
    
    function CreatePerson(name){ this.name = name; this.showName = function(){ alert( this.name ); }; } var p1 = new CreatePerson('小明'); //p1.showName(); var p2 = new CreatePerson('小强'); //p2.showName(); alert( p1.showName == p2.showName ); //false var arr = new Array(); var date = new Date();

    3、上面就提到了

    p1.showName == p2.showName 为何是false。其原因是,地址引用不同。所以就引出来原型。

    //原型 : 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能 )
    
    //原型 : CSS中的class
    //普通方法 : CSS中的style
    
    //原型 : prototype : 要写在构造函数的下面
    
    /*var arr = [1,2,3,4,5];
    var arr2 = [2,2,2,2,2];
    
    arr.sum = function(){
        
        var result = 0;
        for(var i=0;i<this.length;i++){
            result += this[i];
        }
        return result;
        
    };
    arr2.sum = function(){
        
        var result = 0;
        for(var i=0;i<this.length;i++){
            result += this[i];
        }
        return result;
        
    };
    
    //alert( arr.sum() );  //15
    //alert( arr2.sum() );  //10*/
    
    var arr = [1,2,3,4,5];
    var arr2 = [2,2,2,2,2];
    
    Array.prototype.sum = function(){
        var result = 0;
        for(var i=0;i<this.length;i++){
            result += this[i];
        }
        return result;
    };
    
    alert( arr.sum() );  //15
    alert( arr2.sum() );  //10

     然后返回到上面小明小强的例子,

    p1.showName == p2.showName 是false  ,如何变成true
    //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
    
    //new后面调用的函数 : 叫做构造函数
    
    function CreatePerson(name){
        
        this.name = name;
        
    }
    CreatePerson.prototype.showName = function(){
        alert( this.name );
    };
    
    var p1 = new CreatePerson('小明');
    //p1.showName();
    var p2 = new CreatePerson('小强');
    //p2.showName();
    
    alert( p1.showName == p2.showName );  //true
    
    var arr = new Array();
    var date = new Date();


  • 相关阅读:
    [crontab]修改默认编辑器
    [mysql]忘记用户密码或者误删用户账号
    [vim]多行注释和多行删除
    [mysql]my.cnf在哪里
    [python]有中文字符程序异常的解决方案
    [Linux]虚拟机无法安装deepin15.9的解决方案
    Elasticsearch5.X IN Windows 10 系列文章(2)
    Elasticsearch5.X IN Windows 10 系列文章(1)
    HTTP Error 502.5
    centos7 yum install redis
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/5022274.html
Copyright © 2011-2022 走看看