程序猿都没对象,JS竟然有对象?

时间:2022-04-23
本文章向大家介绍程序猿都没对象,JS竟然有对象?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

  现在做项目基本是套用框架,不论是网上的前端还是后端框架,也会寻找一些封装好的插件拿来即用,但还是希望拿来时最好自己过后再回过头了解里面的原理,学习里面优秀的东西,不论代码封装性,还是小到命名。

  好吧,扯远了,在这里要讲的是大家前端用得多的JS,可能接触最多的是Jquery,但原生的JS最好还是要了解的,至少能看懂别人的代码,然后学习。

  平时用得多的无非是if for 逻辑处理字符串,截断字符串,数组,然后是查找元素,对元素背景什么的属性操作,这些都是些实用性上的东西,这里讲一些更深入点的,如何理解Javascript对象。

  C#,Java都是面象对象的语言,但JavaScript本身不是面向对象的语言,而是基于对象的语言。 JavaScript中所有事物都是对象, 包括字符串、数组、日期、数字,甚至是函数(验证方法是你可以在实例上 . 出属性)。

  基于这点我们可以封装自己的插件,这里就不讲怎么制作插件了,想了解的可查询我的如何制作插件的文章。

创建对象,平时用到的方法:

var emptyObject1 = {};           //创建空对象
var emptyObject2 = new Object(); //创建空对象
var person = {"name":"sdcyst",
          "age":18,
          "sex":"male"};     //创建一个包含初始值的对象person
alert(person.name);              //sdcyst
alert(person["age"]);            //18

  注意上面如何访问一个对象的属性,通过"."操作符获取对象的属性,必须得知道属性的名字.一般来说"[]"操作符获取对象属性的功能更强大一些,   可以在[]中放入一些表达式来取属性的值,比较有灵活性,如 name["name"+(i+1)];

delete操作符可以删除对象中的某个属性,判断某个属性是否存在可以使用"in"操作符,需要注意的是对象中的属性是没有顺序的。

var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) {  //循环name对象中的属性名字
    namestring += name[props];
}
alert(namestring);  //NAME1NAME2NAME3NAME4
 
delete name.name1;  //删除name1属性
delete name["name3"];  //删除name3属性
namestring = "";
for(var props in name) {  //循环name对象中的属性名字
    namestring += name[props];
}
alert(namestring);  //NAME2NAME4
 
alert("name1" in name); //false
alert("name4" in name); //true

  接下来讲讲比较常见的数组对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,数组中的数据可以是任何的数据类型,数组本身仍旧是对象,创建数组可以用"[]"操作符,或者是用Array()构造函数来new一个。

var array1 = [];  //创建空数组
var array2 = new Array();  //创建空数组
array1 = [1,"s",[3,4],{"name1":"NAME1"}]; //
alert(array1[2][1]);  //4   访问数组中的数组元素
alert(array1[3].name1); //NAME1 访问数组中的对象
alert(array1[8]);   //undefined
array2 = [,,];  //没有数值填入只有逗号,则对应索引处的元素为undefined
alert(array2.length); //3
alert(array2[1]);     //undefined

  需要注意的是var array = new Array(10);初始化的长度10实际上对数组没有任何的约束力,数组的长度是可以任意改变的。

  delete操作符删除数组的元素,注意这个删除仅仅是将数组在该位置的元素设为undefined数组的长度并没有改变

var array = new Array("n1","n2","n3","n4","n5");  //五个元素的数组
var astring = "";
for(var i=0; i<array.length; i++) {           //循环数组元素
    astring += array[i];
}
alert(astring);       //n1n2n3n4n5
delete array[3];                   //删除数组元素的值
alert(array.length + "_" + array[3])  //5_undefined
 
array.length = 3;    //缩减数组的长度
alert(array[3]);     //undefined
array.length = 8;    //扩充数组的长度
alert(array[4]);     //undefined

对象中也离不开函数,那如何创建函数:   function f(x) {........}   var f = function(x) {......} 上面这两种形式都可以创建名为f()的函数,不过后一种形式可以创建匿名函数。

  方法的调用需要对象的支持,那么在方法中如何获取对象的属性呢?this!this关键字我们已经很熟悉了,在javascript的方法中,我们可以用this来取得对方法调用者(对象)的引用,从而获取方法调用者的各种属性。

var obj = {"name":"NAME","sex":"female"};
obj.print = function() {  //为对象添加方法
    alert(this.name + "_" + this["sex"]);
};
obj.print();  //NAME_female
obj.sex = "male";
obj.print();  //NAME_male

来一个更加面向对象的例子。

var person = {name:"defaultname",
              setName:function(s){
              this.name = s;
          },
          "printName":function(){
              alert(this.name);
          }}
person.printName();       //defaultname
person.setName("newName");
person.printName();       //newName

  下面更深入点,每一个函数都包含了一个原型(prototype),我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝。

通过prototype创建自定义对象的一个例子:

// 构造函数
        function Person(name, sex) {
            this.name = name;
            this.sex = sex;
        }
        // 定义Person的原型,原型中的属性可以被自定义对象引用
        Person.prototype = {
            getName: function() {
                return this.name;
            },
            getSex: function() {
                return this.sex;
            }
        }

创建自定义对象(实例化类)

var zhang = new Person("ZhangSan", "man");
console.log(zhang.getName());   // "ZhangSan"

当代码var zhang = new Person("ZhangSan", "man")执行时,其实内部做了如下几件事情:

    1. 创建一个空白对象(new Object())。
    2. 拷贝Person.prototype中的属性(键值对)到这个空对象中(我们前面提到,内部实现时不是拷贝而是一个隐藏的链接)。
    3. 将这个对象通过this关键字传递到构造函数中并执行构造函数
    4. 将这个对象赋值给变量zhang。

  上面我们提到了用new来创建一个对象的过程,事实上在这个过程中,当创建了空对象后,new会接着操作刚生成的这个对象的prototype属性。 每个方法都有一个prototype属性(因为方法本身也是对象),new操作符生成的新对象的prototype属性值和构造方法的prototype属性值是一致的。构造方 法的prototype属性指向了一个prototype对象,这个prototype对象初始只有一个属性constructor,而这个constructor属性又指向了prototype属性所在的方 法。有点晕,看下面的图:

  这样,当用构造函数创建一个新的对象时,它会获取构造函数的prototype属性所指向的prototype对象的所有属性。对构造函数对应的prototype对象所做的任何操作都会反应到它所生成的对象身上,所有的这些对象共享构造函数对应的prototype对象的属性(包括方法)。 看个具体的例子吧:

function Person(name,sex) {  //构造函数
    this.name = name;
    this.sex = sex;
}
Person.prototype.age = 12;   //为prototype属性对应的prototype对象的属性赋值
Person.prototype.print = function() { //添加方法
    alert(this.name+"_"+this.sex+"_"+this.age);
};
 
var p1 = new Person("name1","male");
var p2 = new Person("name2","male");
p1.print();  //name1_male_12
p2.print();  //name2_male_12
 
Person.prototype.age = 18;  //改变prototype对象的属性值,注意是操作构造函数的prototype属性
p1.print();  //name1_male_18
p2.print();  //name2_male_18

  在javascript中,所有的方法都有一个call方法和apply方法。这两个方法可以模拟对象调用方法,它的第一个参数是对象,后面的参数表示对象调用这个方法时的参数。概念比较拗口,平时很少遇到,所以用得少,比较难得理解这里就不作过多的讲解了,请自行查找说得更明了的文章来了解吧。

  再来一次前后照应,连JS都有对象,你为什么没有?!!!(说好的不要打脸……)