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

原文地址: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. 工厂模式
  2. 构造函数模式
  3. 原型模式
  4. 组合使用构造函数模式和原型模式

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-26 05:42:09

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

js 面向对象的基本概念和基本使用方法

js 面向对象的基本概念和基本使用方法 -> js 是不是一个面向对象的语言? 不是:与传统面向对象的理论语言有矛盾.C#,Java. 是:js里面到处都是对象,数组,时间,正则- 和 DOM.也可以像传统面向对象的语言那样用 new 的方式创建对象 -> js是一个基于对象的多范式编程语言. 面向过程的方式 面向对象的方式 函数式 递归与链式 例: Jquery 链式编程 面向对象的概念 对象的定义:无序属性的集合,其属性可以包含基本值,对象或是函数 1. 面向:将脸朝向- -> 关注

1.1 js 面向对象的基本概念和基本使用方法

js 面向对象的基本概念和基本使用方法 -> js 是不是一个面向对象的语言? 说不是:因为与传统面向对象的理论语言有矛盾.C#,Java. 说是:因为js里面到处都是对象,数组,时间,正则- 和 DOM.也可以像传统面向对象的语言那样用 new 的方式创建对象 -> 其实js是一个基于对象的多范式编程语言.  面向过程的方式 面向对象的方式 函数式 递归与链式 例: Jquery 链式编程 面向对象的概念 对象的定义:无序属性的集合,其属性可以包含基本值,对象或是函数 1. 面向:将脸朝向-

js 面向对象 定义对象

js面向对象看了很多,却没有完全真正的理解,总是停留在一定的阶段,这次再认真看一下. 面向对象包含两种:定义类或对象:继承机制:都是通过工厂模式,构造函数,原型链,混合方法这四个阶段,原理也一样,只是实现细节有点不同 定义类或对象教程:http://www.w3school.com.cn/js/pro_js_object_defining.asp 思路:工厂模式--构造函数--原型链--混合方式,注意每个阶段的具体写法和不足 工厂模式(四个阶段):原始--工厂--传参--共享方法:方法名小写:不

js面向对象学习笔记之一(类与对象)

1. javascript中的类即函数 /*==============================类即函数=====================================*/ function People(name,sex,addr){ this.name = name; this.sex = sex; this.addr = addr; this.foo = function(){ alert(this.name + this.sex+this.addr); } } var

js面向对象学习笔记之四(Date 对象)

//日期字符串转时间戳 var date="2015-03-18"; date = new Date(Date.parse(date.replace(/-/g, "/"))); date = date.getTime(); document.write(date); var date = new Date(); //返回当前的时间对象 getDate() //日 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() //星期 从 Date 对

js面向对象学习笔记之三(Array 对象)

1. 数组的初始化: //三种初始化方式 new Array(); new Array(size); new Array(element0, element1, ..., elementn); 2. 属性 constructor 返回对创建此对象的数组函数的引用. length 设置或返回数组中元素的数目. prototype 使您有能力向对象添加属性和方法. 3. 方法 concat()     连接两个或更多的数组,并返回结果. 使用: arrayObj.concat(aobj1,aobj2

JS 面向对象之对象的创建

在学习了面向对象,我们了解了面向对象的三大特性:封装.继承.多态.下面我们需要了解对象的创建方式: 1 字面量创建方式 对象有很多描述方式,比如键值对(key--value)的集合.字典.工具包.对象的本质是对变量和函数进行封装,将变量封装成属性,函数封装为方法:这里我们就是采用字典的方式来创建对象,将属性和方法名作为key 1.1 创建一个书对象 var book = { name:"js入门教学", price:"¥34", author:"刘忻欢&q

js深入学习-对象

很多文章介绍JS是一种面向编程语言,既然面向对象编程,那么肯定有对象,那么js的对象和其他面向对象编程语言的对象定义有什么区别. 1.c#,对象是类的实例. int 类型变量就是一个对象.结构 类型变量也是一个对象,自定义一个人的类型,实例化一个变量,也是对象. 2.js 对象,我在 w3school 看到对象的一些介绍,对于对象总有点傻傻分不清楚.到底是类型的实例,还是类型,所以我暂时直接认为给c#一样.类型的实例就是一个对象. 在网上搜索 js 创建对象方式,经常会创建对象的几种方式的blo

js面向对象学习1

我是菜鸟,老鸟勿看,继承多态等太多概念难以理解,还是从实践中慢慢学吧!争取能大致看懂网上的开源的代码. -------------- 对象的组成:方法和属性 属性关键词:静止的,状态 方法关键词:动态的,过程,处理,带括号 -------------- js中的面向对象不是其他语言那样的面向对象. 1 <script type="text/javascript"> 2 //定义arr为一个数组(数组也是一个对象实例,所以arr是个对象实例) 3 var my_arr=[];