javacript 面向对象
1.对象
使用Object创建对象
var p = new Object(); p.name = 'jason';
p.sayName = function(){
alert(this.name);
} 使用字面量的方式创建对象
var p = {
name:'jason',
sayName:function(){
alert(this.name);
}
}
2.属性类型
ECMAScript中有两种属性:数据属性,访问属性
数据属性:是一个包含数据值的位置,有4个描述其行为的特性
configurable:表示能否通过delete删除属性而重新定义,默认true
enumerable:表示能否通过for-in循环返回属性,默认true
writable:表示能否修改属性的值,默认true
value:包含这个属性的属性值,默认undefined
修改属性的默认特性,使用Object.defineProperty(obj,propertyName,descriptor)方法
四个属性值:configurable、enumerable、writable、value
var p = {};
Object.defineProperty(p,'name',{
writable:false,
enumerable:false,
configurable:false,
value:'chen'
}); p.name = 'jason'; // 非严格模式下,赋值会被忽略,严格模式,赋值会报错 定义多个属性使用Object.definePropertys()方法
Object.definePropertys(p, {
'name', {
writable: false,
enumerable: false,
configurable: false,
value: 'chen'
}, {
'age', {
writable: false,
enumerable: false,
configurable: false,
value: '18'
}
});
访问器属性:访问器属性不包含属性值,它们包含getter,setter函数(非必须)该访问属性也有4个特性
configurable:表示能否通过delete删除属性而重新定义,默认true
enumerable:表示能否通过for-in循环返回属性,默认true
get:读取属性调用的函数,默认undefined
set:设置属性调用的函数,默认undefined
var book = {
_year:2016, // 私有属性常以 '_' 开头
edition:1
}; Object.defineProperty(book,'year',{
get:function(){
return this._year;
},
set:function(newValue){
this._year = newValue;
this.edition +=1;
}
}); 使用访问器属性的常见方式即设置一个属性值会导致其他属性发生变化 另一种设置方式(遗弃的方法)
book.__defineGetter('year',function(){
return this._year;
});
book.__defineSetter('year',function(newValue){
this._year = newValue;
});
读取属性的特性 Object.getOwePropertyDescriptor() 方法会返回描述对象
var descriptor = Object.getOwePropertyDescriptor(book,'year'); 返回 descriptor : {
value:'jason',
configurable:false
}
3.创建对象
工厂模式
function createGirlFried(name,job){
var o = new Object();
0.name = name;
o.job = job;
return o;
} var girl1 = createGirlFried('shany','Dotor');
var girl1 = createGirlFried('kaer','Softwarn Engineer'); //没有解决对象识别的问题(对象的类型)
构造函数
function Person(name,job){
this.name = name;
this.job = job;
this.sayName = function(){
alert(this.name);
}
} var p1 = new Person('zs','doctor');
var p2 = new Person('zs','doctor'); alert(p1.construtor == p2.construtor) // true
p1 instanceof Person // true
p1 instanceof Object // true
使用 new 操作符,调用构造函数创建对象,会经历以下4步
1) 创建一个新对象
2) 将构造函数的作用域赋给新对象(this 指向这个新对象)
3) 执行构造函数中的代码(为这个对象添加新属性)
4) 返回新对象
构造函数 当函数用
var p = Person('sy','你猜');
alert(window.name) // sy
构造函数的问题:不同示例上的同名函数是不相等的
function sayName (){
alert(this.name);
}
function Person(name,job){
this.name = name;
this.job = job;
this.sayName = sayName;
}
虽然函数一样,但污染了全局变量
原型模式
每个函数都有一个prototype属性,这是属性是一个指针,指向一个对象(即原型对象,包含共享的属性和方法)
function Person(name,job){
this.name = name;
this.job = job;
} Person.prototype.sayName = function(){
alert(this.name);
} Person.prototype.name = 'susan'; var p1 = new Person('san','programmer');
p1._proto_ == Person.prototype // true p1.name == san // true
虽然可以通过对象访问保存在原型中的值,却不能通过对象实例重写原型中的值,如果添加同名属性将屏蔽原型中的同名属性
如果依旧要访问原型的的同名属性,只能delete obj.propertyName (设置null undefined 无效)
Person.prototype.construtor == Person // true Person.prototype.isPrototypeOf(Person) // true 检查一个属性是否是原型属性还是实例属性
hasOwnProperty();
p1.hasOwnProperty('name') // true
两种方式使用in操作符( in / for in )
'name' in p1 // true
for (var prop in p1){
console.log(prop)
}
使用for-in返回所有能通过对象访问的、可枚举属性(包含实例属性和原型属性)
获取对象上所有可枚举的实例属性,可使用ECMAScript5 的 Object.keys()方法
Object.keys(p) 返回一个数组 (顺序和for-in的顺序一致)
获取对象上所有可枚举的实例属性,无论是否可枚举 Object.getOwePropertyNames()
ps:construtor 是不可枚举的
重写原型对象
Person.prototype = {
construtor:Person, // 虽说修正了 construtor 但此时的 construtor变成可枚举的,原生的construtor是不可枚举的
sayName:function(){
return this.name;
}
}
// 修复可枚举特性
Object.defineProperty(Person.prototype,'construtor',{
enumerable:false
}) 原型的问题:原型的最大问题是由其共享属性的本性导致的,原型中的所有属性都是被实例共享,这种共享对函数非常合适,对包含基本数据类型的属性也说的过去,然而对于引用问题就比较突出了 Person.prototype.friends = ['sam','shany'];
friends 被所有实例共享,修改某个实例会影响其他实例
组合使用构造函数和原型模式
function person(name){
this.name = name;
this.friends = ['san'];
}
Person.prototype.sayName = function(){
alert(this.name);
} 动态原型模式
function person(name){
this.name = name;
this.friends = ['san'];
if(typeof this.sayName != 'function'){
Person.prototype.sayName = function(){
alert(this.name);
}
} } 寄生构造函数
function Person(name,age){
var o = Object();
o.name = name;
o.age = age;
return o;
} var p = new Person('sam',20);
// return 语句重写了构造函数的值 这个方式可在特殊情况下为对象创建构造函数 function MyArray(){
var arr = new Array();
arr.push.apply(arr,arguments);
arr.print = function(){
return this.join('-');
}
return arr;
} var c = new MyArray('a1','a2');
alert(c.print()); 稳妥构造函数 (适合在一些安全的环境中,没有公共属性,其方法也不应用this)
function Person (name,age){
var o = new Object();
o.sayName = function(){
alert(name);
}
} 原型继承 function SuperType(name){
this.name = name;
} function SubType(name,age){
SuperType.call(this,name)
this.age = age;
} 组合继承 -- 常用的继承模式(原型继承 父类方法无法继承过来) function SubType(name,age){
SuperType.call(this,name)
this.age = age;
} SubType.prototype = new SuperType(); 原型继承 -- ECMAScript实现 function object(o){
function F(){}
F.prototype = o;
return new F();
} // ECMAScript中 Object.create(p,{
skill:'js'
})
javacript 面向对象的更多相关文章
- 6. javacript高级程序设计-面向对象设计
1. 面向对象设计 1.1 理解对象 1.1.1 属性类型 (1). 数据属性:相当于对象的字段,包含一个数据值的位置,在这个位置可以读取和写入值.数据属性中有4个描述其行为的特性: l [[Conf ...
- JavaScript是如何面向对象的
一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说"JavaScript是基于原型的!".然后就没什么好 ...
- JavaScript的面向对象原理之原型链详解
一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...
- angular2系列教程(六)两种pipe:函数式编程与面向对象编程
今天,我们要讲的是angualr2的pipe这个知识点. 例子
- 一起学 Java(二)面向对象
一.方法函数 函数也称为方法,就是定义在类中的具有特定功能的一段独立代码.用于定义功能,提高代码的复用性. 函数的特点1> 定义函数可以将功能代码进行封装,便于对该功能进行复用:2> 函数 ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- .NET 基础 一步步 一幕幕[面向对象之对象和类]
对象和类 本篇正式进入面向对象的知识点简述: 何为对象,佛曰:一花一世界,一木一浮生,一草一天堂,一叶一如来,一砂一极乐,一方一净土,一笑一尘缘,一念一清静.可见"万物皆对象". ...
- 简单分析JavaScript中的面向对象
初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...
随机推荐
- django 启动和请求
Django运行方式 调试模式 直接 python manage.py runserver python manage.py runserver python manage.py runserver ...
- ARM LDR伪指令使用方法具体解释
LDR伪指令 10.45 LDR pseudo-instruction 功能:把一个32位马上数或一个32位的内存地址载入到一个寄存器中. 注意:这里描写叙述的是LDR伪指令,而不是LDR指令 ...
- Python标准库:内置函数classmethod(function)
把类函数当作类的一个方法返回. 类方法第一个參数是指明类,跟类中函数一样,第一个參数是指明类实例. 类方法修饰符採用以下的格式来使用: class C: @classmethod def f(cls, ...
- Swift Strings and Characters
String 是一个有序的字符集合,例如 "hello, world", "albatross".Swift 字符串通过 String 类型来表示,也可以表示为 ...
- 使用zeranoe的自动化脚本mingw-w64-build-3.6.4在ubutun14.04_64bit上交叉编译ffmpeg 2.5
编译期间,碰到的两个大问题,是环境变量设置问题. 先列出执行脚本是碰到的两个问题,后面给出解决方法并记录执行的命令步骤. 问题1: 编译binutils 2.5出错 ----------------- ...
- 单链表(Single Linked List)
链表的结点结构 ┌───┬───┐ │data|next│ └───┴───┘ data域--存放结点值的数据域 next域--存放结点的直接后继的地址(位置)的指针域(链域) 实例:从终端输入 ...
- (导航控制器view)全屏幕滑动实现pop效果
看到现在app 中越来越流行的手势滑动实现pop效果,心里很是痒痒跃跃欲试,经过多方查看资料,终于在简书上找到了详细的实现方案: 轻松学习之二——iOS利用Runtime自定义控制器POP手势动画 经 ...
- es3中使用es6/7的字符串扩展
最近在看阮一峰的<ES6标准入门>,在字符串扩展一节中有提到几个新的扩展,觉得挺有意思,想在ES3里面使用,于是就有下面的兼容性写法. repeat 将一个字符串重复n次 String.p ...
- html基础之 input:type
Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍.1,type=text输入类型是text,这是我们见的最多 ...
- MySQL高效获取记录总数
通常mysql获取查询记录总数我们使用如下语句: SELECT COUNT(*) FROM users WHERE k='avs'; 或:SELECT id FROM goods WHERE k=' ...