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也提供了其它的方 ...
随机推荐
- Unix/Linux环境C编程入门教程(38) shell命令进阶演示
1.w命令 该命令也可以查看登录当前系统的用户信息.与who命令相比,w命令的功能更强大,它不但可以显示当前有哪些用户登录到系统,还可以显示这些用户正在进行的操作,并给出更加详细和科学的统计数据 ...
- cf479E Riding in a Lift
E. Riding in a Lift time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- fourinone分布式缓存研究和Redis分布式缓存研究
最近在写一个天气数据推送的项目,准备用缓存来存储数据.下面分别介绍一下fourinone分布式缓存和Redis分布式缓存,然后对二者进行对比,以供大家参考. 1 fourinone分布式缓存特性 1 ...
- .net项目中上传大图片失败
.net项目中有时用户提出要上传大图片,一张图片有可能十几兆,本来用的第三方的上传控件,有限制图片上传大小的设置,以前设置的是2M.按照用户的要求,以为直接将限制图片上传大小的设置改下就可以了,但是当 ...
- Eclipse/IDEA中使用Maven创建Web项目报错
Eclipse中的错误:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webapp-1.0.jar:R ...
- 【SDUT 3038】迷之博弈
action=showproblem&problemid=3038">[SDUT 3038]迷之博弈 简直就是上次省赛的缩减版... 仅仅只是这个是链 省赛是环. ..1 2先 ...
- Android手机APN设置(中国移动 联通3G 电信天翼),解决不能上网的问题
中国移动 第一步,设置CMNET上网 新建APN 1.名称:cmnet 2.APN:cmnet 3.APN类型:default 就仅仅填写上面3个选项,其它都是默认,不用填写. 第二步,设置彩信 新建 ...
- LR实战之Discuz开源论坛——登录脚本
脚本业务流:访问Discuz论坛首页——登录论坛——退出论坛.本次使用LoadRunner11版本. 一.录制脚本注意 1.确保Discuz论坛能在服务器运行正常. 2.录制前先试访问Discuz论坛 ...
- 生成ssl证书文件
网上关于生成SSL证书文件的方法有很多,但我查了几个,发现有或多或少的错误,如下我图文并茂的展示,亲测无任何问题,分享给大家,谢谢. 1.创建根证书密钥文件(自己做CA)root.key openss ...
- vs2010 中检测到有潜在危险的 Request.Form 值
解决方法 : 一般在网上搜只有以下两种处理方式: 1.在报错的页面前吧<%Page%>标签中增加validateRequest="false"的属性为false 如下所 ...