做网络平台的网站有哪些,wordpress 主题 排行榜,重庆市网站建设,网页打不开无法访问此网站《JavaScript高级程序设计》已经学习到了第四章#xff0c;不过因为第五章讲的都是各种对象类型#xff0c;所以在进行第五章的学习之前#xff0c;先深入了解一下对象是有好处的。 JavaScript Objects in Detail 关于对象类型的方方面面在这篇文章里都写得很清楚了#xf… 《JavaScript高级程序设计》已经学习到了第四章不过因为第五章讲的都是各种对象类型所以在进行第五章的学习之前先深入了解一下对象是有好处的。 JavaScript Objects in Detail 关于对象类型的方方面面在这篇文章里都写得很清楚了本着不重复造轮子的原则我这里也不打算再重新写一篇了更何况我这新手写出来的文章肯定也跟人家的没得比。 鉴于很多朋友可能对英文不是很感兴趣所以这里准备把文章翻译过来。不过提前声明本人没有什么翻译经验翻译出来的文章可能水平欠佳。如果英文比较好的话建议直接看原文。毕竟是新的尝试各位高手如果有啥建议或者意见可以在评论提出但请勿无故乱喷。 JavaScript对象类型详解 JavaScrtip有六种数据类型一种复杂的数据类型引用类型即Object对象类型还有五种简单的数据类型原始类型Number、String、Boolean、Undefined和Null。其中最核心的类型就是对象类型了。同时要注意简单类型都是不可变的而对象类型是可变的。 什么是对象 一个对象是一组简单数据类型有时是引用数据类型的无序列表被存储为一系列的名-值对(name-value pairs)。这个列表中的每一项被称为 属性如果是函数则被称为 方法。 下面是一个简单的对象 var myFirstObject { firstName: Richard,favoriteAuthor: Conrad}; 可以把对象考虑成一个列表列表中的每一项属性或方法都以名-值对的方式存储。上面例子中对象的属性名就是firstName和favortieAuthor相应的对象的属性值为Richard和Conrad。 属性名可以是字符串或者数字但是如果以数字作为属性名则必须以方括号方括号记法来获得这个数字属性名对应的属性值。稍后有方括号记法的更详细解释。下面是一个方括号记法的例子 var ageGroup {30: Children, 100:Very Old};console.log(ageGroup.30) // 报错// 访问30这个属性的正确方法console.log(ageGroup[30]); // Children//最好避免使用数字作为属性名 作为一个JavaScript程序员你会经常使用到对象数据类型。一般用它来储存数据或者创建自定义的方法或函数。 引用数据类型和原始数据类型 引用类型与原始类型最主要的一个不同点就是引用类型是按引用存储的它不会像原始类型一样将值直接存储在变量中。比如 // 原始类型数据是按值存储的 var person Kobe; var anotherPerson person; // anotherPerson the value of personperson Bryant; // person的值改变了console.log(anotherPerson); // Kobeconsole.log(person); // Bryan 可以注意到即使我们将person的值改为Bryant对anthoerPerson也会不有丝毫影响它仍然保存了原本person赋给它的值。 将原始类型的按值存储跟引用类型的按引用存储进行一下比较 var person {name: Kobe};var anotherPerson person;person.name Bryant;console.log(anotherPerson.name); // Bryantconsole.log(person.name); // Bryant 在这个例子中我们将person对象复制给了anthoerPerson但是由于person对象中存储的是引用而不是真正的值。所以当我们将person.name改变为Bryant的时候anotherPerson变量也反应出了这个变化因为它并没有将person中的所有属性都复制一份保存起来而是直接保存了对象的引用。 对象属性的特性Attributes 注Attribute一般也是翻译为属性但是为了跟Propertie也翻译为属性进行区分这里将其翻译为特性这也是咨询过别人的应该无伤大雅 每个对象属性不止保存了自身的名-值对它同时还包含了三个特性这三个特性默认被设置为true。 Configurable Attribute: 指定这个对象属性是否可以被删除或修改。Enumerable指定这个对象属性在for-in循环中是否可以被取得。Writable指定这个对象属性是否可以被修改。在EMACScript 5中有一些新的特性这里不做详细讲解。 创建对象 创建对象有两种比较常用的方法 对象字面量 这是创建对象最常用也是最简单的方式直接使用字面量进行创建 // 空对象var myBooks {};// 使用字面量创建的包含4个属性的对象var mango {color: yellow,shape: round,sweetness: 8, howSweetAmI: function () {console.log(Hmm Hmm Good);}}对象构造函数 第二种常用的方法是使用对象构造函数。构造函数是一种可以用来创建新对象的特殊函数要使用new关键字来调用构造函数。 var mango new Object ();mango.color yellow;mango.shape round;mango.sweetness 8;mango.howSweetAmI function () {console.log(Hmm Hmm Good);}虽然可以使用某些保留字或关键字比如for作为对象属性的名称不过这可不是一个明智的选择。 对象的属性可以包含任何数据类型包括NumberArrays甚至是其它的Object。 对象创建的实践模式 对于创建只使用一次的用于存储数据的简单对象上面的两种方法就可以满足需求。 但是假设有一个程序用于展示水果和它的详细信息。程序中的每个水果类型都有如下对象属性color, shape, sweetness, cost 和一个showName函数。要是每次创建一个新的水果对象时都得敲一遍下面的代码那将是十分乏味和低效率的。 var mangoFruit {color: yellow,sweetness: 8,fruitName: Mango,nativeToLand: [South America, Central America],showName: function () {console.log(This is this.fruitName);},nativeTo: function () {this.nativeToLand.forEach(function (eachCountry) {console.log(Grown in: eachCountry);});}} 如果你有10个水果你就得添加10次相同的代码。并且如果想修改nativeTo函数就得在10个不同的地方进行修改。再进一步推想如果你在开发一个大型网站你为上面的对象都一个一个添加了属性。但是你突然发现你创建对象的方式不是很理想你想要进行修改这时又该怎么办。 为了解决这些重复性的问题软件工程师们发明了各种模式对于重复问题和常见任务的解决方案使用开发程序更有效率和合理化。 下面是两种创建对象的常用模式 构造方法模式 function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) {this.color theColor;this.sweetness theSweetness;this.fruitName theFruitName;this.nativeToLand theNativeToLand;this.showName function () {console.log(This is a this.fruitName);}this.nativeTo function () {this.nativeToLand.forEach(function (eachCountry) {console.log(Grown in: eachCountry);});}} 使用这种模式很容易就可以创建出各式各样的水果来。像这样 var mangoFruit new Fruit (Yellow, 8, Mango, [South America, Central America, West Africa]);mangoFruit.showName(); // This is a Mango.mangoFruit.nativeTo();//Grown in:South America// Grown in:Central America// Grown in:West Africavar pineappleFruit new Fruit (Brown, 5, Pineapple, [United States]);pineappleFruit.showName(); // This is a Pineapple. 如果你要改变属性或方法你只需要在一个地方进行修改就可以了。这个模式通过一个Fruit函数的继承封装了所有水果的功能和特性。 注意 可继承的属性需要定义在对象的prototype对象属性上。比如 someObject.prototype.firstName rich;属于自身的属性要直接定义在对象的上。比如 // 首先创建一个对象var aMango new Fruit ();// 接着直接在对象上定义mongoSpice方法// 因为我们直接在对象身上定义了mangoSpice属性所以它是aMango自身的属性不是一个可继承的属性aMango.mangoSpice “some value”;要访问一个对象的属性使用object.property如 console.log(aMango.mangoSpice); // some value要调用一个对象的方法使用object.method()如 // 首先增加一个方法aMango.printStuff function() { return Printing; }// 现在可以调用printStuff方法aMango.printStuff(); 原型模式 function Fruit () {}Fruit.prototype.color Yellow;Fruit.prototype.sweetness 7;Fruit.prototype.fruitName Generic Fruit;Fruit.prototype.nativeToLand USA;Fruit.prototype.showName function () {console.log(This is a this.fruitName);}Fruit.prototype.nativeTo function () {console.log(Grown in: this.nativeToLand);} 下面是在原型模式中调用Fruit()构造函数的方法 var mangoFruit new Fruit ();mangoFruit.showName(); //mangoFruit.nativeTo();// This is a Generic Fruit// Grown in:USA扩展阅读 如果需要了解这两种模式的更详细的解释可以阅读《JavaScript高级程序设计》的第六章其中详细讨论了这两种方法的优缺点。书中还讨论了除这两个外的其它模式。 如何访问对象中的属性 访问对象属性的两种主要方法是点记法(dot notation)和中括号记法(bracket notation)。 点记法 // 这是我们前面例子中一直使用的访问属性的方法var book {title: Ways to Go, pages: 280, bookMark1:Page 20};// 使用点记法访问book对象的title和pages属性:console.log ( book.title); // Ways to Goconsole.log ( book.pages); // 280中括号记法 // 使用方括号启示访问book对象的属性console.log ( book[title]); //Ways to Goconsole.log ( book[pages]); // 280//如果属性名储存在一个变量当中也可以这样:var bookTitle title;console.log ( book[bookTitle]); // Ways to Goconsole.log (book[bookMark 1]); // Page 20访问一个对象中不存在的属性会得到一个undefined。 自身属性和继承属性 对象拥有自身属性和继承属性。自身属性是直接定义在对象上的属性而继承属性是从Object的Prototype继承的属性。 为了确写一个对象是否拥有某个属性不管是自身属性还是继承属性可以使用in操作符 // 创建一个有schoolName属性的对象var school {schoolName:MIT};// 打印出true因为对象拥有schoolName这个属性console.log(schoolName in school); // true// 打印出false因为我们既没有定义schoolType属性也没有从Object的Prototype中继承schoolType属性console.log(schoolType in school); // false// 打印出true, 因为从Object的Prototype中继承了toString方法console.log(toString in school); // true hasOwnProperty 为了确定一个对象是否拥有一个特定的自身属性可以使用hasOwnPrototype方法。这个方法十分有用因为我们经常需要枚举一个对象的所有自身属性而不是继承属性。 // 创建一个拥有schoolName属性的对象var school {schoolName:MIT};// 打印出true因为schooName是school的自身属性console.log(school.hasOwnProperty (schoolName)); // true// 打印出false因为toString是从Object的Prototype中继承下来的并且school的自身属性console.log(school.hasOwnProperty (toString)); // false 访问和枚举对象中的属性 为了访问对象中可以枚举的属性自身或者继承的可以使用for-in循环或普通的循环方式。 // 创建拥有3个属性的school对象: schoolName, schoolAccredited, and schoolLocation.var school {schoolName:MIT, schoolAccredited: true, schoolLocation:Massachusetts};//使用for-in循环获取对象中的属性for (var eachItem in school) {console.log(eachItem); // Prints schoolName, schoolAccredited, schoolLocation} 访问继承的属性 从Object的Prototype中继承的属性不可枚举的所以在for-in循环中不会访问到这些属性。然而如果是可枚举的继承属性它们也是能够从for-in循环中访问到的。 比如 //使用for-in循环访问school对象中的属性for (var eachItem in school) {console.log(eachItem); // Prints schoolName, schoolAccredited, schoolLocation}// 注以下这段说明是原文的说明/* SIDE NOTE: As Wilson (an astute reader) correctly pointed out in the comments below, the educationLevel property is not actually inherited by objects that use the HigherLearning constructor; instead, the educationLevel property is created as a new property on each object that uses the HigherLearning constructor. The reason the property is not inherited is because we use of the this keyword to define the property.*/// Create a new HigherLearning function that the school object will inherit from.function HigherLearning () {this.educationLevel University;}// Implement inheritance with the HigherLearning constructorvar school new HigherLearning ();school.schoolName MIT;school.schoolAccredited true;school.schoolLocation Massachusetts;//Use of the for/in loop to access the properties in the school objectfor (var eachItem in school) {console.log(eachItem); // Prints educationLevel, schoolName, schoolAccredited, and schoolLocation} 删除对象中的属性 可以使用delete操作符来删除对象中的属性。我们不能删除继承的属性同时也不能删除Configurable特性被设置为false的对象属性。要删除继承的属性必须从Prototype对象中删除也就是定义这些属性的地方。并且我们也不能删除全局对象中的属性。 删除成功的时候delete操作符会返回true。令人意外的是当要删除的属性不存在或者不能被删除即不是自身的属性或者Configurable特性被设置为false时 delete操作符也会返回true。 以下是示例 var christmasList {mike:Book, jason:sweater }delete christmasList.mike; // deletes the mike propertyfor (var people in christmasList) {console.log(people);}// Prints only jason// The mike property was deleteddelete christmasList.toString; // 返回 true, 但是因为toString是继承的属性所以它不会被删除// 因为toString没有被删除所以这里还能够正常使用christmasList.toString(); //[object Object]// 如果一个属性是对象实例的自身属性则我们可以删除它。// 比如我们可以从之前例子中定义的school对象中删除educationLevel属性// 因为educationLevel是定义在那个实例中的我们在HigherLearning函数中定义educationLevel时使用了this关键字。//我们并没有在HigherLearning函数的prototype对象在定义educationLevel属性。console.log(school.hasOwnProperty(educationLevel)); // true// educationLevel是一个school对象的一个自身属性所以 我们可以删除它delete school.educationLevel; // true // educationLevel属性已经从school实例中删除了console.log(school.educationLevel); // undefined// 但是educationLevel属性仍然存在于HigherLearning函数中var newSchool new HigherLearning ();console.log(newSchool.educationLevel); // University// 如果我们在HigherLearning函数prototype中定义了一个属性, 比如这个educationLevel2属性:HigherLearning.prototype.educationLevel2 University 2;// 这个educationLevel2属性不属性HigherLearning实例的自身属性// educationLevel2属性不是school实例的自身属性console.log(school.hasOwnProperty(educationLevel2)); falseconsole.log(school.educationLevel2); // University 2// 尝试删除继承的educationLevel2属性delete school.educationLevel2; // true (正如前面所提到的这个表达式会返回true)// 继承的educationLevel2属性没有被删除console.log(school.educationLevel2); University 2 序列化和反序列化对象 为了在HTTP中传递对象或者将对象转化成字符串我们必须将对象序列化将其转化为字符串。我们可以使用JSON.stringify来序列化对象。要注意的是在ECMAScript 5之前的版本我们要使用json2库来获得JSON.stringify函数。在ECMAScript 5中这个函数已经成为标准函数。 为了将反序列化对象即将字符串转化成对象可以使用JSON.parse函数来完成。同样在第5版之前要从json2库中获取这个函数在第5版中已经加入这个标准函数。 示例代码 var christmasList {mike:Book, jason:sweater, chelsea:iPad }JSON.stringify (christmasList);// Prints this string:// {mike:Book,jason:sweater,chels:iPad}// To print a stringified object with formatting, add null and 4 as parameters:JSON.stringify (christmasList, null, 4);// {// mike: Book,// jason: sweater,// chels: iPad// }// JSON.parse Examples// The following is a JSON string, so we cannot access the properties with dot notation (like christmasListStr.mike)var christmasListStr {mike:Book,jason:sweater,chels:iPad};// Let’s convert it to an objectvar christmasListObj JSON.parse (christmasListStr); // Now that it is an object, we use dot notationconsole.log(christmasListObj.mike); // Book 更多关于JavaScript对象的讨论和解释以及ECMAScript第5版增加的内容可以参考《JavaScript权威指南第6版》第六章。 后记 第一次翻译文章真心觉得要把翻译做好也不是那么简单的很多简单的句子看着很明白结果真正想翻译出来的时候却是死活想不出合适的表达方式。通篇文章都是根据我自己的理解然后通过意译出来的没有逐句进行翻译。所以如果有哪些地方理解有偏差或者翻译不当的地方请尽量指出我会尽快改正。毕竟翻译这往篇文章也是想跟大家分享我不希望因为自己理解的错误导致对大家产生误导。 就酱收工。 转载于:https://www.cnblogs.com/buginux/p/4106008.html
