JavaScript高级程序设计(第三版)学习笔记6、7章


Posted in Javascript onMarch 11, 2016

第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章,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 #Javascript
Angularjs中使用Filters详解
Mar 11 #Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 #Javascript
JavaScript制作简单的日历效果
Mar 10 #Javascript
js滑动提示效果代码分享
Mar 10 #Javascript
js实现页面跳转的五种方法推荐
Mar 10 #Javascript
js实现页面跳转的五种方法推荐
Mar 10 #Javascript
You might like
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
简述JS浏览器的三种弹窗
2018/07/15 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
微信小程序如何访问公众号文章
2019/07/08 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python中的类与对象之描述符详解
2015/03/27 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python class的继承方法代码实例
2020/02/14 Python
Python递归函数特点及原理解析
2020/03/04 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
超市促销活动总结
2014/07/01 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
语文教师个人工作总结
2015/02/06 职场文书