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 面向对象的更多相关文章

  1. 6. javacript高级程序设计-面向对象设计

    1. 面向对象设计 1.1 理解对象 1.1.1 属性类型 (1). 数据属性:相当于对象的字段,包含一个数据值的位置,在这个位置可以读取和写入值.数据属性中有4个描述其行为的特性: l [[Conf ...

  2. JavaScript是如何面向对象的

    一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说"JavaScript是基于原型的!".然后就没什么好 ...

  3. JavaScript的面向对象原理之原型链详解

    一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...

  4. angular2系列教程(六)两种pipe:函数式编程与面向对象编程

    今天,我们要讲的是angualr2的pipe这个知识点. 例子

  5. 一起学 Java(二)面向对象

    一.方法函数 函数也称为方法,就是定义在类中的具有特定功能的一段独立代码.用于定义功能,提高代码的复用性. 函数的特点1> 定义函数可以将功能代码进行封装,便于对该功能进行复用:2> 函数 ...

  6. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  7. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. .NET 基础 一步步 一幕幕[面向对象之对象和类]

    对象和类 本篇正式进入面向对象的知识点简述: 何为对象,佛曰:一花一世界,一木一浮生,一草一天堂,一叶一如来,一砂一极乐,一方一净土,一笑一尘缘,一念一清静.可见"万物皆对象". ...

  9. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

随机推荐

  1. 动态创建和移除HTML标签

    1.w3school定义 添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插 ...

  2. UVA 10047-The Monocycle(队列bfs+保存4种状态)

    题意:给你一张地图,S代表起点,T代表终点,有一个轮盘,轮盘平均分成5份,每往前走一格恰好转1/5,轮盘只能往前进,但可以向左右转90°,每走一步或是向左向右转90° 要花费1单位的时间,问最少的时间 ...

  3. ubuntu cenots 禁止本地登陆

    auth required pam_succeed_if.so user != root

  4. 一张图讲解为什么需要自己搭建自己的git服务以及搭建的途径

    图片信息量有点大.不废话上图 图中的一些链接: gitlab官方安装文档 https://github.com/gitlabhq/gitlabhq/blob/master/doc/install/in ...

  5. Struts2(一)——总体介绍

    这篇博客开始将总结一下有关框架的知识,在开发中合适的利用框架会使我们的开发效率大大提高.当今比较流行的开源框架: 关注数据流程的MVC框架 (Struts1/2, WebWork, Spring MV ...

  6. C语言头文件组织

    一.全局变量单独编写(很值得借鉴). 一般习惯将不同功能模块放到一个头文件和一个C文件中. 例如是写一些数学计算函数: //mymath.h #ifndef _mymath_H #define _my ...

  7. 获取系统的IP

    如何获取Linux系统的ip.当时一直用这种方法获取IP的. ifconfig|grep 'Bcast'|awk -F ':' '{print $2}'|awk '{print $1}' 今天偶然发现 ...

  8. net 2.0使用ajax

    asp.net ajax中用到了几个dll文件,这些可以从网上下载.http://ajax.asp.net站点下可以找到相关的下载.这其中包括:System.Web.Extensions.dll.Sy ...

  9. css模板之 web模板一

    效果 <html><head><style type="text/css">div.container{width:100%;margin:0p ...

  10. u-boot基本命令

    1.查看环境变量 printenv 2.网络相关命令 设置开发板ip:setenv ipaddr 192.168.2.110 设置子网掩码:setenv netmask 255.255.255.0 设 ...