首頁 > web前端 > js教程 > JavaScript高階程式設計(第三版)學習筆記6、7章_javascript技巧

JavaScript高階程式設計(第三版)學習筆記6、7章_javascript技巧

WBOY
發布: 2016-05-16 15:11:06
原創
1264 人瀏覽過

第6章,物件導向的程式設計

物件:

1、資料屬性

configurable,表示能否透過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否將屬性修改為存取器屬性,預設為true

enumerbale,表示能否透過for-in存取屬性,預設true

writable,表示能否修改屬性值,預設true

value,資料儲存位置,預設undefined

修改預設屬性特性:Object.defineProperty(),接收三個參數:屬性所在對象,屬性名,描述符對象,描述符對象屬性必須是:configurable、enumerable、writable、value

例:

var obj = {};
Object.defineProperty(obj,”name”,{
writable:true,
value:”nihao”
}); 
登入後複製

2、訪問器屬性

configurable,表示能否透過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否將屬性修改為存取器屬性,預設為true

 enumerbale,表示能否透過for-in存取屬性,預設true

get,讀取屬性時調用,預設undefined

set,寫入屬性時調用,預設undefined

修改必須透過Object.defineProperty()

例:

var obj = {
_year:2004,
edition:1
}
Object.defineProperty(book,”year”,{
get:function(){
return this._year;
},
set:function(newValue){
if(newValue > 2004){
this._year = newValue;
this.edition += newValue – 2004;
}
}
});
book.year = 2005;
alert(book.edition); //2 
登入後複製

定義多個屬性:Object.defineProperties(),接收兩個對象,一是要修改和添加屬性的兌現,第二個對象屬性與第一個對像要修改或添加的屬性一一對應,支持的瀏覽器:IE9+,FireFox4+,Safari5+,Opera12+,chrome

讀取屬性:Object.getOwnPropertyDescriptor(),接收兩個參數,屬性所在對象,要讀取描述符的屬性名稱,支援的瀏覽器:IE9+,FireFox4+,Safari5+,Opera12+,chrome

建立物件:

工廠模式:

function createPerson(name,age){
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson(“g”,29); 

登入後複製

建構子模式:

function Person(name,age){
this.name = name;
this.age = age;
this.sayName() = function(){
alert(this.name);
};
}
var person = new Person(“g”,28); 
登入後複製

兩種模式差異:

建構函式模式中不需要顯示建立對象,對this直接賦值,沒有回傳語句

建構函式名稱首字母必須大寫,必須使用new運算元建立新實例

原型模式

創建的每個函數都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法,換句話說就是,prototype就是透過函數創建的物件的原型對象,好處在於可以是所有實例共享相同的屬性和方法。

isPrototypeOf(),個人理解就是可以用以判斷某個實例的原型是否與當前原型相同

例:

Person.prototype.isPrototypeOf(person1); //true

Object.getPrototypeOf(),可以傳回某個實例的原型,支援的瀏覽器IE9+,Firefox3.5+,Safari5+,Opera12+,chrome

註:訪問物件屬性名稱時會進行一次搜索,先在實例物件搜索,不存在則到目前物件的原型物件去搜尋。

註:實例中的屬性若與原型物件中的屬性一樣,則會屏蔽原型物件的屬性,與上一條剛好可以對的上

hasOwnProperty()方法可以確定某個屬性是否來自實例,不是來自實例,則傳回false,否則傳回true

在實例上呼叫delete時,只會刪除實例上的屬性名,並不會刪除原型的屬性

例:

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.sayName = function(){
alert(this.name);
}
var per1 = new Person();
var per2 = new Person();
per1.name = "Greg";
alert(per1.name); //"Greg" 来自实例
alert(per2.name); //"Nicholas"
delete per1.name;
alert(per1.name); //"Nicholas" 来自原型
delete per1.name;
alert(per1.name); //"Nicholas" 
登入後複製

註:Object.getOwnPropertyDescriptor()方法只能用於實例屬性,要取得原型屬性描述符,必須直接在原型物件上呼叫本方法

in操作符:只有當屬性在實例物件中或在原型物件中時,傳回true

例:

alert(“name” in Person); //true
alert(“name” in per1); //true 
登入後複製

同時使用in和hasOwnProperty可以判斷該屬性是存在原型中,還是實例中

Object.keys()方法:接收一個物件作為參數,傳回所有可列舉的屬性所組成的字串陣列

Object.getOwnPropertyNames()方法:接收一個對象,傳回所有屬性組成的字串數組,不論是否可枚舉

更簡單的原型語法:

使用上述方法實在太麻煩了,更常使用的是以下方法:使用物件字面量

Person.prototype = {
name : “Nicholas”,
age : 29
sayName = function(){
alert(this.name);
}
} 
登入後複製

不過,此方法,相當於重寫了整個prototype對象,將導致constructor屬性不再指向Person而是指向Object,雖然instanceof還是會返回正確的結果,但透過constructor已經不能確定物件類型了。

var per = new Person();
alert(per instanceof Object); //true
alert(per instanceof Person); //true
alert(per constructor Object); //true
alert(per constructor Person); //false 
登入後複製

若constructor真的很重要,可以如下设置

Person.prototype = {
constructor:Person,
name : “Nicholas”,
age : 29
sayName = function(){
alert(this.name);
}
} 
登入後複製

以上写法会使constructor的enumerable特性被设置为true,默认情况下原生的是false的,在兼容ECMAScript5的浏览器可以使用Object.defineProperty()进行设置

Object.defineProperty(Person.prototype,”constructor”,{
enumerable:false,
value:Person
}); 
登入後複製

注:重写原型对象,将会切断现有原型与任何之前已经存在的对象实例之间的联系

继承(难度较大,需再仔细研究)

使用原型链来实现

子类型要覆盖超类的方法,应该将给原型添加方法的代码放在替换原型之后,

注:通过原型链实现继承时,不能使用对象字面量创建原型方法,否则会重写原型链

借用构造函数

组合继承

原型式继承,Object.creat();接收两个参数:一是用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象

例:Object.creat(person,{name:{value:”greg”}});

寄生式继承

寄生组合式继承

第7章,函数表达式

创建方式:

1、函数声明,可以函数声明提升,就是可以把使用函数的语句放在函数声明之前

function funName(arg0,arg1){
//函数体
} 
登入後複製

2、函数表达式,不能进行函数提升,也就是无法在函数创建前使用函数,在这种情况下创建的函数称为匿名函数,有时也叫拉姆达函数

var funName = function(arg0,arg1){
//函数体
} 
登入後複製

严格模式下无法使用arguments.callee来实现递归,可以使用如下方式实现递归:

var factorial = (function f(num){
if(num <= 1){
return 1;
}else{
return num * f(num - 1);
}
}); 
登入後複製

闭包(难度也不小)

闭包指有权访问另一个函数作用域中的变量的函数,闭包,也是一个函数

创建闭包的常见方式是在一个函数内部创建另一个函数

闭包只能取得包含函数即外部函数中任何变量的最后一个值。下例可以清晰说明问题

例:

function createFuncrions(){
var result = new Array();
for(var i = 0;i < 10;i++){
result[i] = function(){
return i;
}
}
return result;
}
var re = createFuncrions();
alert(re[1](2)); 
登入後複製

每个函数返回的都将是10,而不是如预期般返回对应的索引值,因为createFuncrions函数最后返回时I = 10,此时每个函数都引用保存着变量i的同一个对象,所以在每个函数内部i都是10,可以使用如下方法强制闭包返回预期效果:

function createFuncrions(){
var result = new Array();
for(var i = 0;i < 10;i++){
result[i] = function(num){
return function(){
return num;
};
}(i);
}
return result;
}
var re = createFuncrions();
alert(re[2]()); 
登入後複製

每一个都会返回各自的索引值

模仿块级作用域

使用匿名函数可以模仿块级作用域:

(function(){
alert("test"); //块级作用域,没有使用圆括号将function包起来将会出错
})(); 
登入後複製

使用闭包和私有变量的明显不足之处在于,会在作用域链中多查找一个层次,在一定程度上影响查找速度

函数中定义的变量可以在一定程度上称为私有变量,通过函数可以模拟出私有变量,静态私有变量

增强模块模式:

var singleton = function(){
//private arg and private method
var privateVariable = 10;
function privateFunction(){
return false;
}
//create obj
var obj = new Object();
obj.publicProperty = true;
obj.publicFunction = function(){
privateVariable ++;
return privateFunction();
};
return obj;
}();
alert(typeof singleton);
alert(singleton.publicProperty);
alert(singleton.publicFunction());
登入後複製

以上内容是小编给大家介绍的JavaScript高级程序设计(第三版)学习笔记6、7章,希望对大家有所帮助!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板