JavaScript 고급 프로그래밍(제3판) 학습 노트 6장 및 7장

6장 객체지향 프로그래밍

객체:

1. 데이터 속성

삭제를 통해 속성을 삭제하여 속성을 재정의할 수 있는지, 속성의 특성을 수정할 수 있는지 또는 속성을 접근자 속성으로 수정할 수 있는지 여부를 나타내는 구성 가능

for-in을 통해 속성에 액세스할 수 있는지 여부를 나타내는 enumerbale, 기본값은 true

쓰기 가능, 속성 값을 수정할 수 있는지 여부를 나타냄, 기본값은 true

값, 데이터 저장 위치, 기본값은 정의되지 않음

기본 속성 특성을 수정합니다. Object.defineProperty()는 세 가지 매개변수(속성이 있는 객체, 속성 이름, 설명자 객체)를 받습니다. 설명자 객체 속성은 구성 가능, 열거 가능, 쓰기 가능이어야 합니다. 가치

예:

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

로그인 후 복사

2. 접근자 속성

for-in을 통해 속성에 액세스할 수 있는지 여부를 나타내는 enumerbale, 기본값은 true

get, 속성을 읽을 때 호출되며 기본값은 정의되지 않음

설정, 속성을 쓸 때 호출되며 기본값은 정의되지 않습니다

수정은 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);

로그인 후 복사

두 모드의 차이점:

생성된 객체를 생성자 모드에서 표시할 필요도 없고, 여기에 직접 값을 할당할 필요도 없고, return 문도 없습니다

생성자 이름의 첫 글자는 대문자로 표기해야 하며, 새 인스턴스를 생성하려면 new 연산자를 사용해야 합니다

프로토타입 모드

생성된 각 함수에는 객체에 대한 포인터인 프로토타입 속성이 있습니다. 이 객체의 목적은 특정 유형의 모든 인스턴스에서 공유할 수 있는 속성과 메서드를 포함하는 것입니다. 함수에 의해 생성된 객체의 프로토타입 객체입니다. 장점은 모든 인스턴스가 동일한 속성과 메서드를 공유할 수 있다는 것입니다.

isPrototypeOf(), 개인적으로 이해하기로는 인스턴스의 프로토타입이 현재 프로토타입과 동일한지 여부를 결정하는 데 사용할 수 있다는 것입니다.

예:

Person.prototype.isPrototypeOf(person1) //true

Object.getPrototypeOf()는 특정 인스턴스의 프로토타입을 반환할 수 있으며 IE9+, Firefox3.5+, Safari5+, Opera12+, chrome을 지원합니다

참고: 개체 속성 이름에 액세스하면 먼저 인스턴스 개체에서 검색됩니다. 존재하지 않으면 현재 개체의 프로토타입 개체에서 검색합니다.

참고: 인스턴스의 속성이 프로토타입 객체의 속성과 동일한 경우 프로토타입 객체의 속성은 차단되며 이는 이전 속성과 완전히 동일합니다.

hasOwnProperty() 메서드는 속성이 인스턴스에서 나온 것인지 여부를 확인할 수 있으며, 인스턴스에서 나온 것이 아니면 false를 반환하고, 그렇지 않으면 true를 반환합니다.

인스턴스에서 삭제를 호출하면 해당 인스턴스의 속성 이름만 삭제되고 프로토타입의 속성은 삭제되지 않습니다

예:

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

로그인 후 복사

그러나 이 방법은 전체 프로토타입 객체를 다시 작성하는 것과 동일합니다. 이로 인해 생성자 속성이 더 이상 Person이 아닌 Object를 가리키게 됩니다. 인스턴스of는 여전히 올바른 결과를 반환하지만 생성자를 통해 객체 유형을 결정할 수 없습니다. .

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章，希望对大家有所帮助！