程序猿都没对象，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); //

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