亲,请登录 免费注册

JS之--初识对象和创建对象

扫描二维码阅读手机版

1.什么是对象

JavaScript中,所有事物都可以是对象:字符串,数字,数字,日期,等等等等,对象即拥有属性和方法的数据。

2.在js中,创建对象的几种方式;

1).使用内置对象

其中,内置对象又可以划分为原生对象(JS语言本身提供)和宿主对象(执行环境提供);

例如:

以下对象为原生对象:

    var str = new String('实例初始化String');  // 实例一个String对象;
    var obj = new Object();  // 实例一个Object对象;
    var array = new Array(); // 实例一个数组对象;
    var fn = new Function(); // 实例一个Function
    var date = new Date();   // 时间对象;
    var reg = new RegExp();  // 正则;

以下为宿主对象:

    window,document,body

...

宿主对象,可以直接拿来使用

如:

    window.x = 1; alert(x) // 1

2).使用JSON的方式;

何谓JSON?

可以简单理解为:'键/值'的集合(key/value)

如:

    var json = {};  这就是最简单的创建json字面量的方式。

给json赋值:

    json.name = '张三';  console.log(json.name)  // 张三;

当然,我们可以在创建的时候直接给json赋值;

如:

    var json = {
        name:'张三',
    age:33,
    showName:function(){
            alert('我的名字叫'+this.name);
      }
    }
    console.log(json.name)  // 张三
    console.log(json.age)   // 33
    json.showName();        // 弹出  '我的名字叫张三'
    ...

3).自定义对象;

自定义对象的方式比较常用的,可以分为两种:工厂模式和构造函数模式;

工厂模式:

首先创建一个自定义函数,在函数中新建一个JS提供的内置对象,所有的方法和属性,都挂载在

这个对象上面,最后返回该对象,调用时,只需要用一个变量来接收引用该函数即可;

如:

        var createObj = function(name,age){
            var o = new Object();
            o.name = name;
            o.age = age;
            o.showName = function(){
                alert('我的名字叫:'+o.name);
            };
            o.showAge = function(){
                alert('我的年龄是:'+o.age);
            }
            return o;                         // 最后一定要返回该对象;
        }

使用:

        var p1 = createObj('张三',32);        
        p1.showName();  // 我的名字叫张三;
        p1.showAge();  // 我的年龄是32;
        var p2 = createObj('李四',43);
        p2.showName();  // 我的名字叫李四;
        p2.showAge();  // 我的年龄是43;
                   
        console.log(p1 instanceof createObj)  // false  因为所有的方法和属性,都是挂载在Object对象上返回的,所以使用工厂模式来创建对象,并不能区分出当前对象是具体属于某一个实例,都是继承自Object;
        console.log(p1 instanceof Object)     // true

构造函数模式:

首先传建一个自定义函数,在函数内部,使用this关键字来替代该对象,所有的属性和方法都挂载在

this关键字上,使用时,需要使用new关键字来创建对象;

如:此方法少了return对象的步骤,多了new关键字创建对象的操作;

        var createObj = function(name,age){
            this.name = name;
            this.age = age;
            this.showName = function(){
                alert('我的名字叫:'+this.name);
        };
        this.showAge = function(){
            alert('我的年龄是:'+this.age);
        }
        }
        var p1 = new createObj('张三',43);
        p1.showName();                // 我的名字叫张三;
        p1.showAge();                 // 我的年龄是叫43;
        var p2 = new createObj('李四',32);
        p2.showName();                // 我的名字叫李四;
        p2.showAge();                 // 我的年龄是叫32;
        console.log(blog instanceof createObj);  // true
        console.log(blog instanceof Object);  // true

检测某个对象,是否属于某个实例,可以使用instanceof操作符来完成;

例如:检测一个变量是否属于数组实例,可以进行如下操作:

        var arr = [];        
        console.log(arr instanceof Array)  // true;

两种方法的差异

1.工厂模式的实现方法非常简单,解决了创建多个相似对象的问题,但是工厂模式却无从识别对象的类型,因为全部都是Object,不像Date、Array等

2.工厂函数需要创建对象,以及必须有返回值

3.工厂函数针对的都是Object的对象模型,而构造函数可以匹配自定义的对象模型(即前者不论创建什么都只有一个xx instanceof Object,而后者根据自定义名而定类型,如上举例所示)

4.构造函数弊端,如果在全局中定义相同的局部变量,容易造成全局污染,因为this.xx如果在局部获取不到,就会去全局中获取

5.构造函数可以重写,可以在全局中添加新属性和方法Person.prototype = {},但工厂函数只能在局部添加

各自使用场景:

构造函数:适应用于大型项目,属性以及方法时常变换的项目

工厂函数:适应用于小型项目,或者正在制作过程还没有成型的项目


关注IT新闻、SEO优化、站长技术、营销、建站,扫描19652站长网二维码,定期送礼品。

微信扫描

安卓扫描

热门精选

  • js原生查找元素的4种方法

    js原生查找元素的4种方法

  • JS之--初识对象和创建对象

    JS之--初识对象和创建对象

  • CSS之--定位

    CSS之--定位

  • js判断分支条件语句

    js判断分支条件语句