JavaScript基礎--物件與屬性

————————————————————————————————————————————

物件：JavaScript是基於原型的語言，沒有Class，所以將函數作為類別

包含在物件裡的資料可以透過兩種方式來存取

既屬性的物件(property)和方法(method)

屬性是隸屬於某個特定物件的變量，方法則是某個特定物件才能調運的函數。

物件是由一些彼此相關的屬性和方法集合在一起的一個資料實體、javacript中，屬性和方法對使用「點」的語法來存取。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

物件導向術語

• 物件：屬性的無序集合，每個屬性存放一個原始值、物件和函數

• #類別：每個物件都由類別定義，類別不僅要定義物件的介面（開發者存取的屬性和方法），還要定義物件的內部工作（使屬性和方法發揮作用的程式碼）

• 實例：程式使用類別建立物件時，產生的物件叫做類別的實例。每個實例的行為相同，但實例處理一組獨立的資料。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

# #四種基本能力

• 封裝：把相關的資訊（無論資料或方法）儲存在物件中的能力

• #聚集：把一個物件儲存在另一個物件內的能力

• #繼承：由另一個類別（或多個類別）得來類別的屬性和方法的能力

• 多態：編寫能以多種方法運行的函數或方法的能力

—————————————————————————————————— ——————————

內建物件

• 數據封裝物件
• 支援正規物件的方法

• ##search

• match

• #replace

• split

• #屬性：#Object.prototype.constructor:傳回一個指向建立了該物件原型的函數引用

• 方法：
  ####

• Object.prototype.isPrototypeOf():#偵測一個物件是否存在於另一個物件的原型鏈上

• Object.prototype.propertyIsEnumerable():偵測指定的屬性名稱是否為目前物件可枚舉的自身屬性

• Object.prototype.toString():傳回一個代表該物件的字串

• Object.prototype.valueOf( ):返回的詩this值，即物件本身

• ##Object物件是Js中所有物件的父級對象，我們建立的所有物件都繼承於此

• 方法：

• Object.create():指定原型对象和属性创建一个对象

• Object.defineProperty():给对象添加/修改一个属性并指定该属性的配置

• Object.defineProperties():在一个对象上添加或修改一个或者多个自有属性，并返回该对象

• Object.keys():方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致(两者的主要区别是for-in还会遍历除一个对象从其原型链上继承到得可枚举的属性)

• Object.getOwnPropertyNames():返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性）组成的数组

• Object.getOwnPropertyDescriptor()：返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）)

• Object.getPrototypeOf():返回指定对象的原型(也就是该对象内部属性[[Prototype]]的值)

• Object.freeze():冻结一个对象。冻结对象是指那些不能添加新的属性，不能修改已有属性的值，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性的对象。也就是说这个对象永远不能改变的

• Object.isFrozen():判断对象是否已经被冻结

• Object.preventExtensions():阻止对象扩展

• Object.isExtensible():检测一个对象是否可扩展(是否可以在它上面添加新的属性)

• Object.seal():可以让一个对象密封，并返回被密封之后的对象。密封对象是指那些不能添加新的属性、不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性，但可能可以修改已有属性的值的对象

• Object.isSealed():检测一个对象是否被密封sealed

• Object对象
• Object.prototype

• Number对象

• Boolean对象

• Array对象

• Function对象

• String对象

 1 var myArr = new Array; 2 var str = 'this is a test hello ishello maizi'; 3 var patt = /is/ig; 4 var i = 0; 5 while ((myArr[i] = patt.exec(str)) !== null) 6 { 7     console.log(i + 1 + ':' + myArr[i] + " " + patt.lastIndex); 8     i++; 9 }10 11 str = 'this is a testis';12 patt = /is/ig;13 var res = str.match(patt);14 console.log(res);15 16 res = str.search(patt);17 console.log(res);18 19 res = str.replace(patt, '!');20 console.log(res);21 22 // 将年月日替换为月日年23 str = '2017-06-04';24 res = str.replace(/(\d{4})-(\d{2})-(\d{2})/, '$2-$3-$1');25 console.log(res);26 27 // 调用方法,将匹配到的内容替换成为hugh+匹配内容大写28 str = 'this is a testis';29 res = str.replace(/is/g, func);30 31 function func(match)32 {33     return 'hugh' + match.toLocaleUpperCase();34 }35 console.log(res);36 37 // split38 // 将匹配到的字符串前后拆分39 res = str.split(/\s+/);40 console.log(res);

• 工具类对象

• Math对象

• Date对象

   1 // 显示当前时间 2 console.log(Date()); 3 // 显示毫秒数 4 var d = new Date(138555555550); 5 console.log(d); 6 // 显示填入的时间 7 var d = new Date(2011, 1, 3); 8 console.log(d); 9 // 传入月日10 var d = new Date(10,25);11 console.log(d);12 // Date提供的方法13 console.log(Date.now()); // 自1970年至今所经过的毫秒数14 console.log(Date.parse("2017-01-01")); // 解析一个字符串,返回所经过的毫秒数15 // ...

• RegExp对象

   1 // 通过test()方法检索字符串中的内容,返回true或false 2 var patt1 = new RegExp("r"); 3 var res1 = patt1.test('this is javascript course'); 4 console.log(res1); 5 // 另一种形式 6 // 加上i表示忽略大小写 7 patt2 = /Javascript/i; 8 res2 = patt2.test('this is javascript course'); 9 console.log(res2);10 // 是否包含[]中的字符11 res3 = /[abc]/.test('Brlue');12 // 加上^表示除了abc之外的13 res4 = /[^abc]/.test('Brlue');14 // 检测是否包含数字15 res5= /[0-9]/.test('999');16 // 检测是否包含字母17 res5= /[a-z]/.test('999');18 // 是否出现了以下几个19 res5= /php|javascript|ios/.test('php');20 console.log(res3);21 console.log(res4);22 console.log(res5);

• 错误对象

• 通常使用try/catch/finally来捕获Error错误

• Error类型

• EvalError

• InternalError

• RangeError

• ReferenceError

• SyntaxError

• TypeError

• URIError

• Error对象

   1 try 2 { 3     // 当调用不存在的notExists(),e.name和e.message存放的错误名称和错误信息 4     // notExists(); 5     var n = 0; 6     if (n == 0) 7     { 8         // 手动抛出一个错误信息 9         throw new Error('Throw an error message');10     }11 }12 catch (e)13 {14     console.log(e.name);15     console.log(e.message);16 }17 finally18 {19     // finally中的总是被调用20     console.log('i am in finally');21 }22 23 try24 {25     notExists();26 }27 catch (e)28 {29     // 判断错误的实例化类型30     if (e instanceof EvalError)31         console.log('this is a EvalError');32     else if (e instanceof SyntaxError)33         console.log('this is a SyntaxError');34     else if (e instanceof ReferenceError)35         console.log('this is a ReferenceError');36     else37         console.log('An unknown errorr');38 }39 // 对Error对象重写40 function myError(msg)41 {42     this.name = "myError'sname";43     this.message = msg || "myError'info";44 }45 // 通过Object.create()创建错误原型46 myError.prototype = Object.create(Error.prototype);47 myError.prototype.constructor = myError;48 try49 {50     throw new myError();51 }52 catch (e)53 {54     console.log(e.name);55     console.log(e.message);56 }

自定义对象

• 通过var obj = {} 对象字面量法

• 通过var obj = new Object()创建

• 通过函数构造创建对象

  p.s. 使用的时候通过new操作符得到对象

  用构造器创建对象的时候可以接收参数

  构造器函数的首字母最好大写，区别其他的一般函数

• 当我们创建对象的时候，实际上同时也赋予了该对象一种特殊的属性，即构造器属性

• 这个构造器属性实际上是一个指向用于创建该对象的构造器函数的引用

• function Person(){}

• var Persion = function(){}

• 构造器属性(constructor property)

• 通过instanceof操作符可以检测一个对象是否由某个指定的函数构造器创建

• 通过Object.create()创建对象

 1 /*********************************** 2  * 对象字面量 3  ***********************************/ 4 var oTest = {}; 5 document.write(typeof oTest + ""); 6 var oTest2 = { x: 1, 'y': 2, "z": 3 }; 7 document.write(oTest2.x + " " + oTest2.y + " " + oTest2.z + ""); 8 var oTest3 = { 9     username: 'rog91222',10     passwd: '123123',11     person: {12 firstname: "hugh",13 lastname: "dong"14     },15     age: 2016 }17 document.write(oTest3.username + " " + oTest3.person.firstname + " " + oTest3.age + "");18 /***********************************19  * new Object()创建对象20  ***********************************/21 var oTest4 = new Object();22 /***********************************23  * 通过构造器函数的形式创建对象24  ***********************************/25 function funcTest(num1, num2) {26     this.n1 = num1;27     this.n2 = num2;28 }29 var oTest5 = new funcTest(1, 2);30 document.write(oTest5.n1 + " " + oTest5.n2 + "");31 // 通过instanceof检测是否由函数构造器构造的32 document.write(oTest5 instanceof funcTest);33 document.write("<br>")34 /***********************************35  * 通过Object.create()创建对象36  ***********************************/37 var oTest6 = Object.create({ x: 1 });38 // 不继承任何方法39 var oTest7 = Object.create(null);40 // 创建一个普通的空对象41 var oTest8 = Object.create(Object.prototype);

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

对象特性

• 原型(prototype)

• 通过对象字面量的形式创建，则使用object.prototype作为它们的原型。

• 通过new和构造函数创建，则使用构造函数的prototype作为它们的原型。

• 如果通过Object.create()创建，使用第一个参数(或null)作为它们的原型

  var obj = Object.create({ x: 1 });

• 类(class)

• 扩展标记(extensible flag)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

对象的结构

• 声明对象obj，对象有2个属性 x=1,y=2，每个属性都有对应的属性特性，对象也有3个对象特性

• 对象的原型链：

  如图所示，当在对象中找不到属性z时，会向方法的原型查找，继续向对象的原型查找，直到顶层null位置。

  每个对象都和另外一个对象关联，就构成了一个原型链，每一个对象都从原型继承属性。

  >

  

     

  

     

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

检测对象上是否有某个属性

• in(包括原型上的)

• hasOwnProperty(仅检测对象自己有的属性)

 1 function foo()  {} 2 foo.prototype.z = 5; 3 var obj1 = new foo(); 4 obj1.x = 1; 5 obj1.y = 2; 6 console.log('x' in obj1); 7 console.log('y' in obj1); 8 console.log('toString' in obj1); 9 console.log('nonono' in obj1);10 console.log(obj1.hasOwnProperty('x'));11 console.log(obj1.hasOwnProperty('z'));

————————————————————————————————————————————

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

数据属性：每个属性有4个描述行为的特性：

• [writable]:是否能修改属性的值

• [enumerable]：是否通过for in 循环返回属性(是否可以被枚举)

• [configurable]：是否能通过delete删除，能否修改属性的特性，能否修改访问器属性

• [value]：包含这个属性的数据值，读取属性值的时候从这个位置读取。默认值为undefined

存取器属性

• get：获取属性的值

• set：设置属性的值

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性操作

p.s. 正常属性名可以放在""''或不放引号内，但如果包含特殊字符、保留字、数字开头，必须放在引号之间

• 访问属性

• 添加属性

• 修改属性

• 删除属性

• 遍历属性

 1 var person = 2 { 3     fName : 'hugh', 4     lName : 'dong', 5     age : 20 6 }; 7 // 通过.或[]来实现查询属性 8 console.log(person.fName); 9 console.log(person['lName']);10 console.log(person["age"]);11 // 如果属性不确定,需要使用[]来读取属性,此处key不能加引号12 var key = 'fName';13 console.log(person[key]);14 // 在对象内部通过this获取属性15 function PersonInfo(fName, lName, age)16 {17     this.firstName = fName;18     this.lastName = lName;19     this.year = age;20 }21 var person1 = new PersonInfo('wang', 'er', 30);22 console.log(person1.firstName);23 console.log(person1.lastName);24 console.log(person1.year);25 // 添加属性26 var obj = {};27 obj.userName = 'username';28 obj.passwd = '123456';29 obj['permissions'] = 'admin';30 console.log(obj.userName);31 console.log(obj.passwd);32 console.log(obj.permissions);33 // 修改属性34 obj.passwd = '123.com';35 console.log(obj.passwd);36 // 删除属性,删除后再打印该属性为undefined37 // p.s.delete只能删除自身的属性,不能删除集成的属性38 // 要删除继承属性,只能从定义它的属性的原型对象上删除它,会影响到所以继承这个原型的对象39 // delete只是断开属性和宿主对象的联系,而不会去操作属性的属性40 delete obj.permissions;41 console.log(obj.permissions);42 // 遍历属性43 // i存放的是属性名称,obj[i]存放的是属性值44 for (var i in obj)45 {46     console.log(i + ":" + obj[i]);47 }48 // 对象中有方法49 var obj1 =50 {51     user : '111',52     pass : '222',53     sayHi : function (x)54     {55         return this.user + x + 1;56     }57 }58 console.log(obj1.sayHi(3));