• HTML 学习笔记 JavaScript(创建对象)


    原博地址:http://www.cnblogs.com/dolphinX/p/3288118.html

    JavaScript 有Date Array String等这样的内置对象,功能强大实用简单,但在处理一些复杂逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象。

    对象是什么

    从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值,对象或函数。也就是说对象是一组没有特定顺序的属性,每个属性都会映射到一个值上,是一组键值对,值可以是数据或对象。

    最简单的对象

    JavaScript的一对花括号{}就可以定义为一个对象,这样的写法实际上和调用Object的构造函数一样

    var obj = {};
    var obj2 = new Object();

    这样构建出来的对象仅仅包含一个指向Object的prototype的指针,可以使用一些valueOf、hasQwnProperty等方法,没有多大实际作用,自定义对象嘛总要有一些自定义的属性、方法神马的。

    var obj = {};
    //添加属性 和 方法
    obj.a = 0;
    obj.fun = function() {
        alert("我是一个对象");
    }
    
    var obj2 = {
        a:0;
        fn:function(){
            alert("我是自定义对象");
        }
    }

     可以在定义万对象后通过"."为其添加属性和方法,也可以使用字面量赋值方法在定义对象的时候为其添加属性和方法。这样创建的对象,其方法和属性可以直接使用对象引用,类似于类的静态变量和静态函数,这样创建的对象又一个明显的缺陷----在定义大量对象的时候 很费力,要一遍遍的写几乎重复的代码。

    抽象一下

    既然是重复代码就可以抽象出来,用函数来做这些重复的工作,在创建对象的时候调用一个专门创建对象的方法,对于不同的属性值只需要传入不同的参数就行。

    window.onload = function() {
        var obj = createObj(2,function() {
            alert(this.a);
        });
        obj.fn();
        
    }
    
    function createObj(a,fn) {
        var obj = {};
        obj.a = a;
        obj.fn = fn;
        return obj;
    }

    这样创建大量对象的时候,就可以调用创建对象的方法来做一些工作了,这种方式也不完美,因为在很多时候需要判断对象的类型,上面的代码创建出来的对象都是最原始的Object对象实例,只是拓展了一些属性和方法。

    有型一些

    又是function出场的时候,JavaScript中function就是个对象,在创建对象的时候可以抛开上面的createObj(),直接使用function作为对象,怎么实现复用呢,这就在于function作为对象的特殊性了。

    (1)function可以接受参数,可以根据参数来创建相同类型不同值的对象。

    (2)function作为构造函数(通过new操作符调用)的时候会返回一个对象,

    构造函数的返回值分为两种情况,当function没有return语句或者return回一个基本类型(bool,int,string,undefined,null)的时候,返回new 创建的一个匿名对象,该对象即为函数实例;如果function体内return一个引用类型对象(Array,Function,Object等)时,该对象会覆盖new创建的匿名对象作为返回值。

    3. 那么使用function怎么解决类型识别问题呢,每个function实例对象都会有一个constructor属性(也不是“有”,而是可以对应),这个属性就可以指示其构造是谁,也可以使用instanceof 操作符来做判断对象是否为XXX的实例。

    function Person(name) {
        this.name = name;
        this.fun = function() {
            alert(this.name);
        }
        
    }
    
    
    var person2=new Person('Frank');
    person2.fun();

    这样就完美了吧,也不是!虽然构造函数可以是对象有型,但对象的每个实例中的方法都要重复一遍!

    function Person(name){
                    this.name=name;
                    this.fn=function(){
                        alert(this.name);
                    }
                }
                
                var person1=new Person('Byron');
                var person2=new Person('Frank');
                
                console.log(person1.fn==person2.fn);//false

    看看看,虽然两个实例的fn一模一样,但是却不是一回事儿,这如果一个function对象有一千个方法,那么它的每个实例都要包含这些方法的copy,很让内存无语啊。

    完美方法

    究竟有没有一种近乎完美的构造对象的方式,及不用做重复工作,又有型,对象通用方法又不必重复?其实可以发现使用function已经距离要求和接近了,只差那么一点儿——需要一个所有function对象的实例共享的容器,在这个容器内存发实例需要共享的属性和方法,正好这个容器是现成的——prototype,不了解prototype的同学可以看看JavaScript prototype

    function Person(name){
                    this.name=name;
                }
                
                Person.prototype.share=[];
                
                Person.prototype.printName=function(){
                    alert(this.name);
                }
                
                var person1=new Person('Byron');
                var person2=new Person('Frank');
                
                console.log(person1.printName==person2.printName);//true

    这样每个Person的实例都有自己的属性name,又有所有实例共享的属性share和方法printName,基本问题都解决了,对于一般的对象处理就可以始终这个有型又有爱的创建对象模式了。

    // http://www.cnblogs.com/dolphinX/p/3286177.html

  • 相关阅读:
    使用Eclipse创建Maven的JSP项目
    MySQL远程访问
    IDEA创建web工程,不用Archetype(超简单)
    IDEA创建web工程(超简单)
    共享软件
    C语言讲义——链表完整代码
    base64图片显示问题
    JAVA 判断一个字符串是否是合法的日期格式?
    SpringBoot配置本地文件映射路径
    SpringBoot读取资源目录下的文件
  • 原文地址:https://www.cnblogs.com/huanying2000/p/6223248.html
Copyright © 2020-2023  润新知