程序猿都没对象,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);  //NAME1NAME2NAME3NAME4delete 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 =newArray();//创建空数组

array1 = [1,"s",[3,4],{"name1":"NAME1"}];

//alert(array1[2][1]);//4   访问数组中的数组元素

alert(array1[3].name1);//NAME1 访问数组中的对象

alert(array1[8]);//undefined

array2 = [,,];//没有数值填入只有逗号,则对应索引处的元素为undefinedalert(array2.length);//3

alert(array2[1]);//undefined

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

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

var array =new Array("n1","n2","n3","n4","n5");//五个元素的数组

var astring = "";

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_femaleobj.sex = "male";

obj.print();//NAME_male

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

var person = {name:"defaultname",

setName:function(s){this.name =s;

},"printName":function(){

alert(this.name);

}}

person.printName();//defaultnameperson.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对象的属性(包括方法)。

看个具体的例子吧:

functionPerson(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);

};varp1 =newPerson("name1","male");varp2 =newPerson("name2","male");

p1.print();//name1_male_12p2.print();//name2_male_12Person.prototype.age= 18;//改变prototype对象的属性值,注意是操作构造函数的prototype属性p1.print();//name1_male_18p2.print();//name2_male_18

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

以上示例部分整理于园友文章,用得比较明了所以拿来讲解,以上知识点可能只有在大家实际项目中运用的时候发现问题了,然后再来看,这时理解会更深入点,收藏起来作个备忘吧.

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,745评论 2 17
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,665评论 0 6
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,063评论 1 10
  • Chapter 6 面向对象的程序设计 理解对象 使用对象字面量语法创建对象var person = { n...
    云之外阅读 584评论 0 1
  • JS使用技巧专题 1开发技巧 1.1函数使用 1.1.1函数声明方式 JS函数的写法总结 http://blog....
    Kevin_Junbaozi阅读 1,082评论 0 11