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

一、对象概念

对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”。也就是一组名值对的无序集合。

对象的特性(不可直接访问),也就是属性包含两种,数据属性和访问器属性。

1、数据属性又包含

    Configurable  //表示能否通过delete删除,默认为true;
    Enumerable  //表示能否通过for-in循环返回属性,默认为true;
    Writable     //表示能否修改属性的值,默认为true;
    Value              //包含属性的数据值,默认为undefined

要修改默认属性的特性,必须使用ECMAscript5的object.defineProperty(属性的对象, 属性的名字, 需要修改的属性特性)方法。例如:

   
// 1、修改默认的属性特性,
var person = {};
Object.defineProperty(person, "name", {
    writable : false,
    value : "abc"
});
 
alert(person.name);  //abc
person.name = "bcd";
alert(person.name);  //abc而不是bcd,这里在非严格模式下会忽略,在严格模式下会报错

一旦做了这样的设置之后,就不可再次修改了,否则就会报错。

   
// 1、修改默认的属性特性,
var person = {};
Object.defineProperty(person, "name", {
    writable : false,
    value : "abc"
});
Object.defineProperty(person, "name", {
    writable : true,
});

还有一点要注意的是,在调用Object.defineProperty()方法时,如果不指定第三个参数中的(Configurable,writable,Enumerable),也就是要修改的属性,那么他们都会默认为false

   
// 1、修改默认的属性特性,
var person = {};
person.sex = "nan";
Object.defineProperty(person, "name", {  //在这里我们修改name的值,不指定第三个参数中的属性,看结果
    // writable : false,
    value : "abc"
});
 
alert(person.name);  //abc
person.name = "bcd";
alert(person.name);  //abc,不可修改,默认为false
person.sex = "nv";   //没有调用defineProperty,默认还是为true
alert(person.sex);   //nv

2、访问器属性

    Configurable
    enumerable
    get                //在读取属性时调用的函数
    set                //在写入属性时调用的函数

   
// 2、定义访问器属性
var book = {
    _year : 2014,
    edition : 1
}
Object.defineProperty(book, 'year', {     //year在这里就是定义访问器属性
    get : function(){
        return this._year;
    },
    set : function(value){
        this._year = value;
        this.edition += value-2004;
    }
});
book.year = 2005;
alert(book.edition);  // 2

 

当需要定义多个属性时,可以使用defineProperties(对象, 需要添加的属性);

   
// 3、定义多个属性
var books = {};
 
Object.defineProperties(books, {
    _year : {
        value : 2004
    },
    edition : {
        value : 1
    },
    year : {
        get : function(){
            return this._year;
        },
        set : function(value){
            this._year = value;
            this.edition += value-2004;
        }
    }
});
// books.year = 2006;
// alert(books._year);   ////这里就不能用这个方法赋值了,这里返回2004
var descriptor = Object.getOwnPropertyDescriptor(books, "_year");
descriptor.value = 2006;
alert(descriptor.value);  //2006
// alert(typeof descriptor.get);

 

这些概念似乎用的地方比较少,但是去理解js对象是很有作用的,基础嘛,基础永远是必须的,继续学习~

 

/*---------------------------------------------------------------------------------------------------------------------------------------*/

/*==========================================================================*/

(我发现等号分割线没上面短杠分割线好看)

 

二、创建对象

前几天看到这样的面试题,js创建对象的方法有几种,只知道是3种写法,并不清楚原理是什么,今天整理了下。

    工厂模式
    构造函数模式
    原型模式
    组合使用构造函数模式和原型模式

 

1、工厂模式

   
// 4、工厂模式
function createPerson(name){
    var obj = new Object();
    obj.name = name;
 
    obj.show = function(){
        alert(this.name);
    }
    return obj;
}
var person  = createPerson("ym");//不需要使用new
person.show();

 

2、构造函数模式

构造函数的函数名大写开头,其他函数都是小写

   
// 5、构造函数模式
function Person(name, sex){
    this.name = name;
    var sex = sex; //私有
    this.show = function(){
        alert(sex);
    }
}
var person1 = new Person('ym', 'nan');
alert(person1.name);    //ym
alert(person1.sex);     //undefined
person1.show();         //nan

与工厂模式的区别:

    没有显示创建对象
    直接赋值给this对象
    没有return语句

构造函数的问题:

当对象有多个实例时,这些实例的所有方法都是不同的,因为它都会创建一遍。

   
// 5、构造函数模式
function Person(name, sex){
    this.name = name;
    var sex = sex; //私有
    this.show = function(){
        alert(sex);
    }
}
var person1 = new Person('ym', 'nan');
var person2 = new Person('jh', 'nv');
// alert(person1 instanceof Person);   //true
alert(person1.show == person2.show);   //false

3、原型模式

优点:可以让所有对象实例共享它所包含的属性和方法。

   
// 6、原型模式
function Person2(){}
 
Person2.prototype = {
    name : "ym",
    sex : 'nan',
    show : function(){
        alert(this.name);
    }
}
 
var a = new Person2();
var b = new Person2();
alert(a.show == b.show);  //true

关于prototype,对它的理解也是非常重要的,过几天再学习整理,看了好多次了,觉得还是理解不够。

prototype是一个指针,指向一个对象,而这个对象就是包含所有实例共享的属性和方法,也就是说,通过调用构造函数而创建的那个对象实例的原型对象。

 

原型模式的问题:

// 6、原型模式
function Person2(){}
 
Person2.prototype = {
    name : "ym",
    sex : 'nan',
    love : ['a', 'b'],
    show : function(){
        alert(this.name);
    }
}
 
var a = new Person2();
a.love.push('c');
var b = new Person2();
a.love.push('d');
// alert(a.show == b.show);
alert(a.love);   //abcd
alert(b.love);  //abcd

 

4、组合使用原型模式和构造函数模式

通过以上的例子我们可以知道,构造函数模式,创建的方法都是不同的,都是实例自己拥有的,而原型模式定义的属性和方法是共享的,那么结合起来使用真是perfect。

   
// 6、混合模式
function Perfect(name, sex){
    this.name = name;
    this.sex = sex;
    this.love = ['a' , 'b'];
}
 
Perfect.prototype = {
    constructor : Perfect,
    show : function(){
        alert(this.love);
    }
}
var a = new Perfect('a', 'nan');
var b = new Perfect('b', 'nv');
a.love.push('c');
b.love.push('d');
a.show();   //abc
b.show();   //abd

总算是整理完了,我也理解了原来创建对象的3种方法就是上面说的前3点,但最好用的是第4种。

时间: 2024-08-07 03:54:25

js面向对象学习 - 对象概念及创建对象的相关文章

js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)_javascript技巧

在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

js内置对象 学习笔记_javascript技巧

mark相关的知识点: 首先,什么是js的内置对象,它包括了些什么内容?(以下内容转自网上资源的整合) (W3shool JS手册地址:http://www.jb51.net/w3school/js/js_reference.htm) 作为一门编程语言,JavaScript提供了一些内置的对象和函数.内置对象提供编程的几种最常用的功能.JavaScript内置对象有以下几种. ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储

JS面向对象编程详解_javascript技巧

序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些情况下,原型模式能够提供一定的便利,但在复杂的应用中,基于原型的面向对象系统在抽象性与继承性方面差强人意.由于JavaScript是唯一一个被各大浏览器支持的脚本语言,所以各路高手不得不使用各种方法来提高语言的便利性,优化的结果就是其编写的代码越来越像类语言中的面向对象方式,从而也掩盖了JavaSc

程序猿都没对象,JS竟然有对象?

现在做项目基本是套用框架,不论是网上的前端还是后端框架,也会寻找一些封装好的插件拿来即用,但还是希望拿来时最好自己过后再回过头了解里面的原理,学习里面优秀的东西,不论代码封装性,还是小到命名. 好吧,扯远了,在这里要讲的是大家前端用得多的JS,可能接触最多的是Jquery,但原生的JS最好还是要了解的,至少能看懂别人的代码,然后学习. 平时用得多的无非是if for 逻辑处理字符串,截断字符串,数组,然后是查找元素,对元素背景什么的属性操作,这些都是些实用性上的东西,这里讲一些更深入点的,如何理

JS中类或对象的定义

 本篇文章主要是对JS中类或对象的定义进行了说明介绍,需要的朋友可以过来参考下,希望对大家有所帮助 我们知道,JS是面向对象的.谈到面向对象,就不可避免的要涉及类的概念.一般像c#,java这些强类型语言都有固定的定义类的语法.而JS的不同之处在于它能使用各种方法实现自己的类和对象.一般的实现有以下几种方式:   1.工厂方式 工厂方式是指创建一个返回特定对象类型的工厂函数,示例代码如下:  代码如下: function createCar(sColor,iDoors,iMpg) {    va

Python基础08 面向对象的基本概念

原文:Python基础08 面向对象的基本概念 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 谢谢逆水寒龙,topmad和Liqing纠错   Python使用类(class)和对象(object),进行面向对象(object-oriented programming,简称OOP)的编程. 面向对象的最主要目的是提高程序的重复使用性.我们这么早切入面向对象编程的原因是,Python的整个概念是基于对象的.了解OOP是进一步学

详解JS面向对象编程_javascript技巧

因为JavaScript是基于原型(prototype)的,没有类的概念(ES6有了,这个暂且不谈),我们能接触到的都是对象,真正做到了一切皆为对象 所以我们再说对象就有些模糊了,很多同学会搞混类型的对象和对象本身这个概念,我们在接下来的术语中不提对象,我们使用和Java类似的方式,方便理解 方式一 类(函数模拟) function Person(name,id){ //实例变量可以被继承 this.name = name; //私有变量无法被继承 var id = id; //私有函数无法被继

JS面向对象高级特性

本篇是通过学习视频<一头扎进javascirpt高级篇>整理的一些相关知识,大致包括下面几个方面: 1 对象的创建方法 2 对象的对象属性.私有属性.类属性 3 对象的对象方法.私有方法.类方法 4 javascirpt的继承.封装.与多态 对象的创建方法: 对象的创建可以通过两种方式,第一种通过对象初始化的方法: var person={ name:"xingoo", age:26, say:function(){ console.log("say someth

进一步深入Ruby中的类与对象概念

  这篇文章主要介绍了进一步深入Ruby中的类与对象概念,包括集成与多态等更多知识点的整理,需要的朋友可以参考下 Ruby是纯面向对象的语言,所有项目似乎要Ruby中为一个对象.Ruby中的每个值是一个对象,即使是最原始的东西:字符串,数字甚至true和false.即使是一个类本身是一个对象,它是Class类的一个实例.本章将通过所有功能涉及到Ruby的面向对象. 类是用来指定对象的形式,它结合了数据表示和方法操纵这些数据,转换成一个整齐的包.在一个类的数据和方法,被称为类的成员. Ruby类的