原文地址: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种。

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

  1. JS基础学习——对象

    JS基础学习--对象 什么是对象 对象object是JS的一种基本数据类型,除此之外还包括的基本数据类型有string.number.boolean.null.undefined.与其他数据类型不同的 ...

  2. js 面向对象 定义对象

    js面向对象看了很多,却没有完全真正的理解,总是停留在一定的阶段,这次再认真看一下. 面向对象包含两种:定义类或对象:继承机制:都是通过工厂模式,构造函数,原型链,混合方法这四个阶段,原理也一样,只是 ...

  3. js面向对象(对象/类/工厂模式/构造函数/公有和原型)

    https://www.cnblogs.com/sandraryan/ 什么是对象 js中一切都是对象(有行为和特征).js允许自定义对象,也提供了内建对象(string date math等) 对象 ...

  4. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  5. js面向对象学习笔记(四):对象的混合写法

    //对象的混合写法//1.构造函数function 构造函数() { this.属性}构造函数.原型.方法 = function () {};//调用var 对象1 = new 构造函数();对象1. ...

  6. js面向对象学习笔记(一):创建空对象,理解this指向

    var obj = new Object();//创建一个空对象 obj.name = '小王';//属性 obj.sayName = function () { //对象方法 对象最重要的是this ...

  7. js面向对象学习

    纯属笔记,加强记忆,不是教程,欢迎纠错,没有逻辑,不太适合学习使用. -------------- 继承多态等太多概念难以理解,还是从实践中慢慢学吧!争取能大致看懂网上的开源的代码. -------- ...

  8. js面向对象学习笔记(五):tab切换

    重点是this指向问题 <style> .hide{display: none;} #box div,#box1 div{display: none;} .hover{background ...

  9. js面向对象学习总结

    1.函数作为参数进行传递 function a(str,fun){ console.log(fun(str)) }; function up(str){ return str.toUpperCase( ...

随机推荐

  1. HTML URL地址解析

    通过JavaScript的location对象,可获取URL中的协议.主机名.端口.锚点.查询参数等信息. 示例 URL:http://www.akmsg.com/WebDemo/URLParsing ...

  2. 【疯狂造轮子-iOS】JSON转Model系列之一

    [疯狂造轮子-iOS]JSON转Model系列之一 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 之前一直看别人的源码,虽然对自己提升比较大,但毕竟不是自己写的,很容易遗 ...

  3. 在.NET Core 里使用 BouncyCastle 的DES加密算法

    .NET Core上面的DES等加密算法要等到1.2 才支持,我们可是急需这个算法的支持,文章<使用 JavaScriptService 在.NET Core 里实现DES加密算法>需要用 ...

  4. DDD CQRS架构和传统架构的优缺点比较

    明天就是大年三十了,今天在家有空,想集中整理一下CQRS架构的特点以及相比传统架构的优缺点分析.先提前祝大家猴年新春快乐.万事如意.身体健康! 最近几年,在DDD的领域,我们经常会看到CQRS架构的概 ...

  5. macOS 我的装机

    最近多次配置 Mac 的开发环境,稍微记录一下 1 创建无付费信息的Apple ID 2 Xcode ​ gem 源更改 3 Alfred 4 微信 5 SourceTree 6 Sublime Te ...

  6. 【Net跨平台第一步】逆天带你零基础Linux入门【更新完毕】

    部分讲义:(视频已删,后期以文档形式发布)

  7. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  8. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  9. Hive安装配置指北(含Hive Metastore详解)

    个人主页: http://www.linbingdong.com 本文介绍Hive安装配置的整个过程,包括MySQL.Hive及Metastore的安装配置,并分析了Metastore三种配置方式的区 ...

  10. Java定时任务的常用实现

    Java的定时任务有以下几种常用的实现方式: 1)Timer 2)ScheduledThreadPoolExecutor 3)Spring中集成Cron Quartz 接下来依次介绍这几类具体实现的方 ...