主题:理解对象,创建对象。

小明是一名程序猿,也是一条单身狗!他常常自嘲:每天都会有很多对象,但却没有女朋友!

多么痛的领悟。哈哈,目前比较流行的编程语言都是面向对象的语言(Object-Oriented)。而我们的JavaScript也是面向对象的,尽管它比较特殊。JavaScript中没有类这个概念,每个对象都是基于一个引用类型创建的。这个引用类型可以是前几节说到的原生类型,也可以是开发人员自定义的类型。

对象中可以有属性、方法,创建时赋予一些特征值来定义对象的行为。ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或函数”

 var person = new Object();
person.name = "xuchaoi";
person.age = 24;
person.printName = function() {
console.log(this.name);
};

事实上,我们更喜欢这样创建一个对象:

 var person = {
name: "xuchaoi",
age: 24,
printName: function() {
console.log(this.name);
}
};

在ECMAScript5中还为我们提供了Object.defineProperty()方法去修改对象属性默认的特性,有兴趣自行了解吧,一般也用不到!

人类总是“懒惰”的!日常中我们的程序可能会写很对对象,这其中就有很多对象是差不多的。既然差不多,为什么要重复写呢?这样就出现了一个概念,工厂模式!所谓工厂模式,就是一种设计模式(废话...),抽象创建对象的过程(疑惑...)。在JavaScript中,我们通过函数来封装创建(一类)对象的细节,这样就可以通过这个函数创建很多差不多的对象啦,这个函数就像一个工厂一样(明白了...)。补充:这里会比较多的用到this,后面会单独详细的讲解。这里可以先这么理解:在全局函数中,this指向window。函数被某个对象调用,函数中的this就指向那个对象。匿名函数中的this指向window。

 function createPerson(name, age) {
var person = {
name: name,
age: age,
printName: function() {
console.log(this.name);
}
};
return person;
}
var person1 = createPerson("xuchaoi", 24); //*补充:person1.constructor = Object
var person2 = createPerson("xiaoming", 25); //*constructor属性:构造函数。

这里运用createPerson()函数创建对象很方便。但存在一个问题,就是新产生的对象的constructor属性(构造函数)都指向了Function,而不是person。打个比方的说,函数createPerson就像一个厂房把构造person的机器关在了里面,我们无法知道构造机器是什么样的。为了识别这些机器(识别对象),出现了一个新的方式:构造函数模式。

 function Person(name, age) {
this.name = name;
this.age = age;
this.printName = function() {
console.log(this.name);
}
} //构造函数的特点:1.函数名首字母大写;2.属性和方法赋给了this对象;3.没有return语句
var person1 = new Person("xuchaoi", 24); //用构造函数创建实例时,用new这个关键字
var person2 = new Person("xiaoming", 25); //person2.constructor === Person => true

这时,“懒惰”的人又说了,person1和person2重复创建了Person的printName函数...

 person1.printName === person2.printName; // false

好吧,那我把构造函数中的函数单独拎出来!

function Person(name, age) {
this.name = name;
this.age = age;
this.printName = printName;
}
function printName() {
console.log(this.name)
}
var person1 = new Person("xuchaoi", 24);
var person2 = new Person("xiaoming", 25);

这样完美了吧! NO NO NO,那要是构造函数中的方法很多怎么办?那岂不是全局window下有好多像printName()这样的函数!这样的话就丝毫没有封装性(很高大上的思想)可言了。这时,便出现了一种传说中的原型模式!

下节再说,工作喽 ─=≡Σ(((つ•̀ω•́)つ

回归JavaScript基础(九)的更多相关文章

  1. 回归JavaScript基础(六)

    主题:引用类型Date.RegExp的介绍. 上节主要主要介绍了Object.Array引用类型.这节将继续为大家介绍引用类型,并对书中的一些知识点进行总结与归纳,也借此巩固自己对JavaScript ...

  2. 回归JavaScript基础(一)

    主题:JavaScript简介. 一.JavaScript的起源 JavaScript诞生于1995年.当时,它的主要作用是处理一些输入验证操作.之前的话,都是把表单数据发送到服务器端,然后再去判断有 ...

  3. 回归JavaScript基础(十)

    主题:创建对象 原型模式 JavaScript中的每个对象都有一个prototype属性(原型属性),这个属性是一个指针,指向一个对象,而这个对象可以由一些属性和方法组成.被指向的对象,可以是多个对象 ...

  4. 回归JavaScript基础(八)

    主题:引用类型包装类.单体内置对象的介绍. 对于我们开发人员来说,JavaScript有种引用类型一定很陌生!那就是基本包装类型:Boolean.Number和String.这也不是我们的错,主要这些 ...

  5. 回归JavaScript基础(七)

    主题:引用类型Function的介绍. 今天首先说的就是Function类型.下面就是定义函数的两种方法,第一种使用函数声明语法定义,第二种使用函数表达式定义.这两种定义函数的方式几乎没有什么区别. ...

  6. 回归JavaScript基础(五)

    主题:介绍引用类型Object.Array. 在上一章中,作者就在说变量的值的时候,提到过引用类型这个概念.JavaScript中存在基本类型和引用类型,其中引用类型很重要,这里有许多我们需要注意的东 ...

  7. 回归JavaScript基础(四)

    主题:JavaScript变量.作用域和内存问题 JavaScript的变量和别的语言比起来是与众不同的.说道变量,不得不谈他的作用域.同很多语言一样,JavaScript开发者也不用担心开发中内存的 ...

  8. 回归JavaScript基础(三)

    主题:JavaScript基本概念. 任何语言的核心必然会描述这门语言最基本的工作原理.这部分内容对我们来说,读起来很乏味,甚至会产生困意,但这部分内容却是重要的!我有幸拜读<JavaScrip ...

  9. 回归JavaScript基础(二)

    主题:在HTML中使用JavaScript. 要想把JavaScript放到网页中,就必须涉及到Web的核心语言HTML.向HTML页面中插入JavaScript的主要方法,就是使用<scrip ...

随机推荐

  1. Java_单例模式

    主要介绍单例模式的一种写法.注意事项.作用.测试,以Java语言为例,下面代码是目前见过最好的写法: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  2. Python -- 图片处理

    使用PIL库 转换图片格式(jpg  -->  png) from PIL import Image Image.open('E:/art.jpg').save('E:/art.png')

  3. js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)

    1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...

  4. Struts文件上传(FormFile)

    Struts中FormFile用于文件进行上传 1.在jsp文件中进行定义 <form action="/StrutsFileUpAndDown/register.do" m ...

  5. Node.js http服务器搭建和发送http的get、post请求

    1.Node.js 搭建http服务器 1.1创建server.js var http = require('http'); var querystring = require('querystrin ...

  6. 关于 AXI协议的学习解释说明

    AXI(Advanced eXtensible Interface)是一种总线协议,该协议是ARM公司提出的AMBA(Advanced Microcontroller Bus Architecture ...

  7. 任务四十:UI组件之日历组件(一)

    任务四十:UI组件之日历组件(一) 面向人群: 有一定基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习 ...

  8. [转]ASP.NET cache缓存的用法

    本文转自:https://blog.csdn.net/mss359681091/article/details/51076712 本文导读:在.NET运用中经常用到缓存(Cache)对象.有HttpC ...

  9. [转]Sql Server Report Service 的部署问题

    本文转自:https://www.cnblogs.com/syfblog/p/4651621.html 近期在研究SSRS部署问题,因为以前也用到过SSRS报表,但当时开发的报表是有专门的集成系统的, ...

  10. elasticsearch环境搭建

    学习elasticsearch有一段时间了,整理一些学习的笔记以备忘. 以下内容都是在windows环境下的操作. 一,安装一个较新版本的java,我本地安装的java 8. 二,安装elastics ...