js面向对象看了很多,却没有完全真正的理解,总是停留在一定的阶段,这次再认真看一下。

面向对象包含两种:定义类或对象;继承机制;都是通过工厂模式,构造函数,原型链,混合方法这四个阶段,原理也一样,只是实现细节有点不同

定义类或对象教程:http://www.w3school.com.cn/js/pro_js_object_defining.asp

思路:工厂模式--构造函数--原型链--混合方式,注意每个阶段的具体写法和不足

工厂模式(四个阶段):原始--工厂--传参--共享方法;方法名小写;不用new执行;

原始:

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
alert(this.color);
};

缺点:如果创建多个对象,就要写很多遍相同的代码

工厂:把通用的代码放在一个函数中;函数内,创建一个对象,return一个对象

function createCar() {
var oTempCar = new Object;
oTempCar.color = "blue";
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
} var oCar1 = createCar();
var oCar2 = createCar();

缺点:生成的对象,属性方法完全一样

传参:给属性传递不同的参数;生成的对象,有相同的属性名,不同的属性值;

function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
} var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25); oCar1.showColor(); //输出 "red"
oCar2.showColor(); //输出 "blue"

缺点:生成的对象,有各自的方法,浪费内容

共享方法:在工厂函数外定义自己的方法,再通过属性指向

function showColor() {
alert(this.color);
} function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = showColor;
return oTempCar;
} var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25); oCar1.showColor(); //输出 "red"
oCar2.showColor(); //输出 "blue"

缺点:语义上看不像对象的方法  

构造函数:工厂模式的四个阶段,可以通过构造函数共同解决;方法名首字母大写;没有创建对象,使用this;new执行;没有return;

function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function() {
alert(this.color);
};
} var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

共享方法的问题,跟工厂模式的一样。

原型链:用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性

function Car() {
} Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {
alert(this.color);
}; var oCar1 = new Car();
var oCar2 = new Car(); oCar1.drivers.push("Bill"); alert(oCar1.drivers); //输出 "Mike,John,Bill"
alert(oCar2.drivers); //输出 "Mike,John,Bill"

缺点:

1、构造函数没有参数,这个问题,可能原型链就是这样定义的吧。

2、如果属性(driver)指向对象,多个实例对指向同一个对象,出现问题。

目的:属性不能共享(如果需要共享的话,写在prototype上),方法需要共享;  

  

混合方式:

function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");
} Car.prototype.showColor = function() {
alert(this.color);
}; var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25); oCar1.drivers.push("Bill"); alert(oCar1.drivers); //输出 "Mike,John,Bill"
alert(oCar2.drivers); //输出 "Mike,John"

现在:属性在构造函数创建,方法在原型链上创建。

  

  

js 面向对象 定义对象的更多相关文章

  1. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  2. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  3. JS中定义对象和集合

    在js中定义对象: 方式一: var obj = {}; obj['a']=1; obj['b']=2; 方式二: var obj=new Object(); obj.a=1; obj.b=2; 在j ...

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

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

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

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

  6. js中定义对象的几种方式

    转载:http://blog.sina.com.cn/s/blog_60f632050100wz7h.html (1)基于已有对象的扩充方法:适用于临时构建对象,弊端:每次构建对象都要新建一个. va ...

  7. js中定义对象的方式有哪些?

    1.对象直接量 2.构造函数 3.原型方法 4.动态原型方法

  8. 原型设计模式prototype-构造js自己定义对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS中定义对象原型的两种使用方法

    第一种: function Person() { this.username = new Array(); this.password = "123"; } Person.prot ...

随机推荐

  1. fiddler无法抓取chrome解决方法

    前端开发中,不可避免的要和服务器端进行联调,少了fiddler这个利器可不行. 由于无线开发需要配置UA,我使用chrome进行访问,但是今儿一早过来,发现fiddler无法抓取chrome的请求了. ...

  2. Validate the date format

    Validate the date format function checkdate(input) { var validformat = /^\d{2}\/\d{2}\/\d{4}$/; //Ba ...

  3. Spring Cloud feign

    Spring Cloud feign使用 前言 环境准备 应用模块 应用程序 应用启动 feign特性 综上 1. 前言 我们在前一篇文章中讲了一些我使用过的一些http的框架 服务间通信之Http框 ...

  4. Xpath同时选取不同属性的元素

    如:一个论坛中,有置顶贴和普通贴,它们使用了不同的class,但这两类帖子都是需要的内容,需要同时爬下来 假设置顶贴class="top",普通贴class="commo ...

  5. vmware虚拟机桥接模式不能上网

    方法/步骤     首先我的主机的有线连接是正常的,如下:   但是我的虚拟机的网络连接模式为桥接模式,但是却上不了网,如下:   我们来确认下,我的虚拟机的网络模式,如下:   设置全部都是对的,但 ...

  6. jdbcTemplate in

    参考 http://blog.csdn.net/gaopeng0071/article/details/75049952 使用NamedParameterJdbcTemplate public cla ...

  7. (重要)LRU cache

    [抄题]: [思维问题]: 需要从任何位置访问某数字有没有(重要 ),返回其位置(不重要),所以用hashmap. 需要从任何位置删除,用linkedlist.最终二者结合,用linked hashm ...

  8. [leetcode]269. Alien Dictionary外星字典

    There is a new alien language which uses the latin alphabet. However, the order among letters are un ...

  9. c语言重载(overriding in C)或函数不定参数个数

    google一下 c overiding发现有这样一段英文解释: Because C doesn't require that you pass all parameters to the funct ...

  10. 对FPKM/RPKM以及TPM的理解

    对FPKM/RPKM以及TPM的理解 2018年07月03日 16:05:53 sixu_9days 阅读数:559 标签: FPKM/RPKMTPMRNA-Seq 更多 个人分类: RNA-Seq ...