现在做项目基本是套用框架，不论是网上的前端还是后端框架，也会寻找一些封装好的插件拿来即用，但还是希望拿来时最好自己过后再回过头了解里面的原理，学习里面优秀的东西，不论代码封装性，还是小到命名。
好吧，扯远了，在这里要讲的是大家前端用得多的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")执行时，其实内部做了如下几件事情：
-
- 创建一个空白对象（new Object()）。
- 拷贝Person.prototype中的属性（键值对）到这个空对象中（我们前面提到，内部实现时不是拷贝而是一个隐藏的链接）。
- 将这个对象通过this关键字传递到构造函数中并执行构造函数。
- 将这个对象赋值给变量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都有对象，你为什么没有？！！！（说好的不要打脸……）
