js高级教程 第六章-面向对象的程序设计(一)
来源:互联网 发布:c语言中bind函数 编辑:程序博客网 时间:2024/05/22 01:34
本章核心
- 理解对象熟悉属性
- 理解并创建对象
- 理解继承
理解对象
目前创建对象的常用方法是使用字面量。
实例:
var person = { name:'zhang', age:11, sayJob: function(){ alert('student'); }}
- 属性类型
- 数据属性
1.[[Configuration]]: 能否删除属性,能否修改属性特性,能否把属性改为访问器属性。
2.[[Enumerable。]:能否循环属性。
3.[[Writable]]:能否修改属性值。
4.[[Value]]:读取属性值。
- 数据属性
修改属性需要使用Object.defineProperty(属性所在对象,属性名字,描述符对象(即上面提到的四个))
var person = {};Object.defineProperty(person,'name',{writalbe:false , value:"zhang "});alert(person.name);//zhangperson.name='li';alert(person.name);//zhang 被设置为了只读属性,不能直接修改
PS:一旦把configurable属性定义为了不可配置,那么除了writeable,其他属性都将不可更改。
2.访问器属性
包含一对getter和setter函数(想起java了)。
访问器属性的四个特征:
1.[[Configuration]]: 能否删除属性,能否修改属性特性,能否把属性改为访问器属性。
2.[[Enumerable。]:能否循环属性。
3.[[Get]]:读取属性的时候调用
4.[[Set]]:设置属性的时候调用
同样访问器属性也需要Object.defineProperty()调用
var book = { _year = 2005, //_表示只能通过对象访问 edition = 1}Object.defineProprety(book,"year",{ get:function(){ return this._year; } set:function(newValue){ if(newValue>2005){ this._year = newValue; this.edition += newValue - 2005;}}});book.year = 2006;alert(edition);
- 定义多个属性
ecmasripte定义了Object.defineProperties(要添加或者修改属性的对象,对象属性)方法添加定义多个属性。
var book = {};Object.defineProperties(book,{ _year:{ value:2004 }, edition:{ value:1 }, year{ get:function(){ return this._year;}}});
- 读取属性的特性
js提供了Object.getOwnPropertyDescriptor(属性所在对象,属性名称)
var book = {};Object.defineProperties(book,{ _year:{ value:2004 }, edition:{ value:1 }, year{ get:function(){ return this._year;}}});var descriptor = Object.getOwnPropertyDescriptor(book,"_year");alert(descriptor.value); //2004
创建对象
- 工厂模式
functin createPerson(name,age){ var p = new Object(); p.name = name; p.age = age; p.say = function(){ alert('Hello'); return p;}createPerson('zhang',11);
- 构造函数模式
functon Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); };}var Person1 = new Person('zhang',11,'woker');
- 将构造函数当成是函数
构造函数就是用new操作符来调用的。
var person = new Person('zhang',11,'worker');person.sayName();// 在构造函数中调用Person('li',11,'worker');window.sayName();// 普通的函数var o = new Object();Person.call(o,'yang',12,'teacher');o.sayName();// 在另外的对象中调用
构造函数存在的问题
每定义一个构造函数就会创建一个实例。(参见上面的例子中,构造函数会new一个function(sayName))原型模式
所谓原型模式,就是使用prototype定义一个共享的实例,不同的对象通过prototype这个指针指向这个实例。
functon Person(){ Person.prototype.name = 'zhang'; Person.prototype.age = 11; Person.prototype.sayName = function(){ alert('hi'); };}var p1 = new Person();p1.sayName();var p2 = new Person();p2.sayName();
1.理解原型对象 只要创建一个新函数就会自动生成一个prototype属性,这个属性指向这个函数的原型对象。而原型对象会获得构造函数的属性并且指向prototype属性所在的函数。 在代读取某个对象的属性的时候,实际上进行了两次搜索。第一次解析器会问实例是否具有某个属性,如果没有,然后再问它的原型是否具有。我们可以通过prototype访问原型属性,但是却不可以修改(但是会在实例中覆盖),联系上一段的两次解析。
functon Person(){ Person.prototype.name = 'zhang'; Person.prototype.age = 11; Person.prototype.sayName = function(){ alert('hi'); };}var p1 = new Person();var p2 = new Person();p1.name = 'li';alert(p1.name);//lialert(p2.name);//zhang
使用delet操作符可以删除实例属性
functon Person(){ Person.prototype.name = 'zhang'; Person.prototype.age = 11; Person.prototype.sayName = function(){ alert('hi'); };}var p1 = new Person();var p2 = new Person();p1.name = 'li';alert(p1.name);//lialert(p2.name);//zhangdelete p1.name;alert(p1.name);//zhang
通过hasOwnProperty()方法可以检测属性来自实例还是原型(实例则返回true)
getOwnProperty()只能用在实例属性上
2.原型与in操作符
functon Person(){ Person.prototype.name = 'zhang'; Person.prototype.age = 11; Person.prototype.sayName = function(){ alert('hi'); };}var p1 = new Person();var p2 = new Person();alert('name' in p1);//true
使用hasPrototypeProperty()来检验属性是否存在原型中
要取得对象中所有可以枚举的实例属性,可以使用keys()方法
function Person(){ Person.prototype.name = 'li'; Person.prototype.age = 11; Person.prototype.job = 'teacher';}var keys = Object.keys(Person.prototype);alert(keys);//name,age,job
PS:如果是实例属性,则不会返回原型属性。
如果想得到所有的实例属性(不管是否可以枚举),可以使用Object.getOwnPropertyNames()
3.更简单的原型语法
function Person(){}Person.prototype = { name : 'li', age : 11, job : 'worker'}
但是此时已经没有constructor了,因为constructor是在新函数中自动设定的,而这里我们相当于重写了Person函数。如果要constructor的话需要自己添加
function Person(){}Person.prototype = { constructor : Person; name : 'li', age : 11, job : 'worker'}
- js高级教程 第六章-面向对象的程序设计(一)
- javascript高级程序设计(第六章面向对象的程序设计)
- js高级教程 第六章-面对对象的程序设计(二)
- js高级教程 第六章-面对对象的程序设计(三)
- js高级教程 第六章-面对对象的程序设计(四)
- 第六章 面向对象的程序设计 JavaScript高级程序设计
- 第六章 面向对象的程序设计(二) JavaScript高级程序设计
- Javascript高级程序设计 第六章 --- 面向对象程序设计
- JavaScript高级程序设计 第六章 面向对象程序设计
- javascript高级程序设计第三版 第六章 面向对象的程序设计
- 【javascript高级程序设计】读书摘录3 第六章、面向对象
- 第六章:面向对象的程序设计
- 第六章 面向对象的程序设计
- JS高级程序设计6-面向对象的程序设计(理解对象)
- Python高级教程(一)面向对象
- 第六章 面向对象面向对象程序设计
- JS程序设计 Chapter6 - 面向对象 (一)
- JavaScript高级程序设计4--面向对象的程序设计(上)
- [Leetcode] 350. Intersection of Two Arrays II 解题报告
- ssh免密码登录的坑
- KindEditor/常见问题
- 每日一点Js(五)
- SpringCloud(五):Ribbon了解
- js高级教程 第六章-面向对象的程序设计(一)
- cf Educational Codeforces Round 26 E. Vasya's Function
- 算法学习之旅,初级篇(9)--字符串逆序
- java多线程初探
- java的基础语法(个人总结)
- sublime软件设置整理
- Leetcode-Search Insert Position-Python
- 上层使用jni(从java层到framework到JNI的用法过程)
- ural1846 GCD2010(线段树+gcd+离散化)