[Javascript]：JS创建对象方式、对象使用说明与常用内置对象总结

最新推荐文章于 2022-08-24 19:22:12 发布

南纬的风

最新推荐文章于 2022-08-24 19:22:12 发布

阅读量585

点赞数 1

分类专栏： H5/CSS/JS/jQuery 文章标签： JS function Object 字面量形式内置对象

本文链接：https://blog.csdn.net/fengwei4618/article/details/77972723

版权

H5/CSS/JS/jQuery 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

Javascript除了内置对象之外，还可以自定义对象，下面就将介绍JS创建对象的几种方式以及怎么动态添加对象的属性和方法(函数)。关于一些常用内置对象也会在最后介绍。

JS创建对象方式

1.function创建对象的构造函数

function除了创建普通函数，还能用于创建对象的构造函数。

//创建无参构造函数
      function Person(){}
      //创建有参构造函数
      function Animal(type, weight){
          this.type = type;
          this.weight = weight;
      }   
      //实例化对象，调用构造函数
      var a = new Person();
      var b = new Animal("老虎", "100kg");

      //使用匿名函数形式创建构造函数
      var c = new function(){       
      }

function创建构造函数和普通函数没什么两样，但如果不使用new操作符，使用的就是普通函数。而使用new 操作符调用构造函数，就会创建对象。
最后使用匿名函数形式创建构造函数，注意：这里的是new function(){} ，而使用new Function(){}是使用Function对象，两者不相同。

2.通过Object对象的构造函数

通过所有对象的顶级对象Object来创建对象，和Java一样，对象都是唯一的。

        var a = new Object();
        var b = new Object();       
        console.log(a === b); //false

3.使用字面量形式创建对象

       //这里创建的是空对象，还未赋予属性和方法
        var c = {}; 
        var d = {};

关于字面量形式：个人理解就是一种简写，在JS中一切都是对象，但总不能给变量简单赋个值也用对象形式，太过麻烦。所以为了简单直观，一些地方可以采用字面量形式来书写，如下：

        var str = new String("Hello, world"); 
        var strs = "Hello, worlds"; //字面量形式
        var num = new Number(110);
        var nums = 111; //字面量形式
        var arr = new Array(1,2,5,4,5);
        var arrs = [1,2,5,4,5]; //字面量形式

上面说完了怎么去创建对象，但对象没有属性和方法(函数)，那有什么用呢？接下来会说到给对象动态添加属性和方法的几种方式。

JS对象添加属性和方法

添加方法和调用方法都使用点的形式，而对象存取属性可以用如下两种方式：

objectName.property = value
objectName[property] = value
两者区别：点后面的属性是作为标识符，而[]中的属性是作为一个字符串。

实例

            //创建构造函数  
            function Person() { }
            var p = new Person(); //创建对象  
            //动态添加属性  
            p.name = "AAA";
            p.age = 15;
            //添加函数  
            p.info = function () {
                alert(p.name + "|" + p.age);
            }
            p.info(); //执行

这种方式不仅麻烦，属性和函数还没法复用，而且代码封装性也不好，所以可以进行整合。如下：

 //创建构造函数,给对象赋予属性和方法
        function Person(name, age) {
            this.name = name;
            this.age = age;
            //使用匿名函数形式添加函数
            this.info = function(){
                alert(name + "|" + age);
            }
         }

这种方式看起来就类似Java中类定义的方式，但仍有不足之处，后面会说到。

使用Object对象的实例

       var a = new Object();
        a.name = "青阳";
        a.age = 26;
        //a对象添加方法
        a.info1 = infoFunc;
        a.info2 = infoFunc2;
        //.形式
        function infoFunc(obj) {
            console.log(this.name + "|" + this.age);
        }
        //[]形式
        function infoFunc2() {
            console.log("[]形式：" + this['name'] + "|" + this['age']);
        }
        a.info1();
        a.info2();

字面量形式对象添加属性和方法与其他两种不一样，以key-value形式添加属性和方法，这种创建对象形式也是最常用的JSON格式。

实例

 var obj = {
            name : "傲天",
            age : "15",
            info : function (){
                alert(obj.name + "~~" + obj.age);
            }
        }
        obj.info();

上面关于JS创建对象的几种方式，以及它们添加属性和方法形式都已经简单介绍完成。但是这些都是最简单的创建对象方式，在JS中有多种创建对象的用法来处理不同的情况，这里提供网上一张总结创建对象各种模式的表格，至于怎么去实现，可以去百度一下JS创建对象模式，这类文章还是挺多的。

对象创建模式	代码示意	优点	缺点	备注
对象字面量	var o = {};	写法简单	如有多个对象类似, 冗余代码多	配置文件常用
工厂模式	function factory() { var o = {}; … return o; } var obj = factory();	封装了创建对象的细节, 在创建多个相似对象时, 冗余代码少	对象的类型识别问题
构造函数	function Person(name) { this.name = name; } var p1 = new Person();	解决了对象类型识别的问题, 更接近传统OO	相同的方法在每个实例上都有一份, 浪费资源也可以当成普通函数调用, 此时this指向会乱掉
原型模式	function Person() {} Person.prototype = { say: function() {} };	避免了构造函数模式浪费资源的问题	由于共享的性质, 使用引用类型的属性会出问题	原型的共享性, 动态性
构造函数和原型模式组合	function Person(name) { this.friends = []; } Person.prototype.say = function() {};	-	-
动态原型	function Person(name) { this.name = name; if (typeof this.say !== ‘function’) { this.say = function() {}; } }	最接近传统型OO语言识别对象的类型	-	-
寄生构造	function Person() { var o = new Object(); … return o; } var p1 = new Person();	-	识别对象的类型
稳妥构造函数	function Person(name) { var o = new Object(); o.say = function() { alert(name); }; return o; } var p1 = Person(‘name’);	适用于一些安全环境	对象类型识别

JS用于对象的语句

for...in语句

用于遍历数组或者遍历对象的属性。和Java的for-each语句差不多

格式：
for(变量 in 对象){
 //执行代码
}

实例

       //以之前的对象为例，遍历属性
        for(props in obj){
            document.write(props);
        }
        //获取遍历的对象属性值
        for(props in obj){
            document.write(obj[props] + "\n"); //这里只能用[]形式来获取属性值
        }
        
        //遍历数组值
        var arr = [4,3,2,35,1,4,36];
        //i值是索引
        for(i in arr){
            document.write(arr[i] + " ");
        }

with语句

可以方便地引用特定对象，用于设置某些代码在该特定对象中的作用域。
简要说明：在with语句块中，没有为属性和方法指定对象时，则默认使用传入的对象。
但with语句块运行效率不高，所以能不使用，就不使用。

      // //访问对象属性，无需对象名.属性
        with(obj){
            console.log(name);
            console.log(age);
            console.log(info);
        }
        //字符串演示with语句
        var str = "what is the use method for with?";
        with(str){
            console.log(indexOf(1));
            console.log(toUpperCase());
            console.log(replace("wh", "QQ"))
            // 输出结果：
            // -1
            // WHAT IS THE USE METHOD FOR WITH?
            // QQat is the use method for with?
        }