JavaScript Advanced Programming (Third Edition) Study Notes Chapter 6 and 7

Chapter 6, Object-oriented Programming

Object:

1. Data attributes

configurable, indicating whether the attribute can be redefined by deleting the attribute through delete, whether the characteristics of the attribute can be modified, or whether the attribute can be modified into an accessor attribute. The default is true

enumerbale, indicating whether the attribute can be accessed through for-in, the default is true

writable, indicating whether the attribute value can be modified, the default is true

value, data storage location, default undefined

Modify the default attribute characteristics: Object.defineProperty(), which receives three parameters: the object where the attribute is located, the attribute name, and the descriptor object. The descriptor object attributes must be: configurable, enumerable, writable, value

Example:

var obj = {};
Object.defineProperty(obj,”name”,{
writable:true,
value:”nihao”
});

Copy after login

2. Accessor properties

enumerbale, indicating whether the attribute can be accessed through for-in, the default is true

get, called when reading attributes, default is undefined

set, called when writing attributes, default is undefined

Modification must be done through Object.defineProperty()

Example:

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

Copy after login

Define multiple properties: Object.defineProperties(), which receives two objects. One is the property to be modified or added. The properties of the second object correspond one-to-one with the properties of the first object to be modified or added. Supported Browsers: IE9+, FireFox4+, Safari5+, Opera12+, chrome

Read attributes: Object.getOwnPropertyDescriptor(), receives two parameters, the object where the attribute is located, and the attribute name of the descriptor to be read. Supported browsers: IE9+, FireFox4+, Safari5+, Opera12+, chrome

Create object:

Factory mode:

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

Copy after login

Constructor pattern:

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

Copy after login

The difference between the two modes:

There is no need to display the created object in the constructor mode, directly assign a value to this, and there is no return statement

The first letter of the constructor name must be capitalized, and the new operator must be used to create a new instance

Prototype Mode

Each function created has a prototype attribute, which is a pointer to an object. The purpose of this object is to contain properties and methods that can be shared by all instances of a specific type. In other words: , prototype is the prototype object of the object created by the function. The advantage is that all instances can share the same properties and methods.

isPrototypeOf(), my personal understanding is that it can be used to determine whether the prototype of an instance is the same as the current prototype

Example:

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

Object.getPrototypeOf(), can return the prototype of a certain instance, supported browsers IE9+, Firefox3.5+, Safari5+, Opera12+, chrome

Note: When accessing the object attribute name, a search will be performed. First, search in the instance object. If it does not exist, search in the prototype object of the current object.

Note: If the attributes in the instance are the same as the attributes in the prototype object, the attributes of the prototype object will be blocked, which is exactly the same as the previous one

The hasOwnProperty() method can determine whether a property comes from an instance. If it does not come from an instance, it returns false, otherwise it returns true

When delete is called on an instance, only the attribute names on the instance will be deleted, and the attributes of the prototype will not be deleted

Example:

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"

Copy after login

Note: The Object.getOwnPropertyDescriptor() method can only be used for instance properties. To obtain the prototype property descriptor, this method must be called directly on the prototype object

in operator: Returns true only if the attribute is in the instance object or in the prototype object

Example:

alert(“name” in Person); //true
alert(“name” in per1); //true

Copy after login

Use in and hasOwnProperty at the same time to determine whether the property exists in the prototype or instance

Object.keys() method: receives an object as a parameter and returns a string array composed of all enumerable properties

Object.getOwnPropertyNames() method: receives an object and returns a string array composed of all properties, whether enumerable or not

Simpler prototype syntax:

It is too troublesome to use the above method. The following method is more commonly used: using object literals

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

Copy after login

However, this method is equivalent to rewriting the entire prototype object, which will cause the constructor property to no longer point to Person but to Object. Although instanceof will still return the correct result, the object type cannot be determined through the 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

Copy after login

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

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

Copy after login

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

Object.defineProperty(Person.prototype,”constructor”,{
enumerable:false,
value:Person
});

Copy after login

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

继承（难度较大，需再仔细研究）

使用原型链来实现

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

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

借用构造函数

组合继承

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

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

寄生式继承

寄生组合式继承

第7章，函数表达式

创建方式：

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

function funName(arg0,arg1){
//函数体
}

Copy after login

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

var funName = function(arg0,arg1){
//函数体
}

Copy after login

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

var factorial = (function f(num){
if(num <= 1){
return 1;
}else{
return num * f(num - 1);
}
});

Copy after login

闭包（难度也不小）

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

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

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

例：

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

Copy after login

每个函数返回的都将是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]());

Copy after login

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

模仿块级作用域

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

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

Copy after login

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

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

增强模块模式：

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

Copy after login

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