1.工厂方式

<script type="text/javascript">

function createObject(name){

       var p = new Object();

       p.name=name;

       p.say = function(){alert(p.name+'ff');}

       return p;

}

var p1 = createObject("p1");

var p2 = createObject("p2");

alert(p1.name+" "+p2.name);

p1.say();p2.say();

alert(p1.say==p2.say); //false

</script>

问题:每创建一个对象,对象的方法是新对象,浪费资源

 
2、构造函数方式

<script type="text/javascript">

function Person(name){

this.name = name;

this.say = function(){

alert("I am "+this.name);

}

}

var p1 = new Person("wang");

var p2 = new Person("li");

p1.say();

p2.say();

alert(p1.say==p2.say); //false

 

</script>

 

问题:

创建对象时比工厂方法更易于理解。

和工厂方法一样,每个对象都有自己的方法,浪费资源。

 

 
3、原型方式

function Person(){}

Person.prototype.name = "";

Person.prototype.say = function(){

alert("I am "+this.name);

}

 

var p1 = new Person();

var p2 = new Person();

alert(p1.say == p2.say);//true

 

问题:无法在构造方法中传递参数,所有对象共享属性。

优点:对象共方法,节约资源。

 
4、构造方法+原型方式

function Person(name){

       this.name = name;

}

Person.prototype.say = function(){

       alert("I am "+this.name);

}

var p1 = new Person("wang");

var p2 = new Person("li");

p1.say();

p2.say();

alert(p1.say==p2.say); //true

 

优点:解决了前面提到的问题。

问题:封装不够完美。

 
5、动态原形方式

function Person(name){

this.name = name;

if(Person.prototype.say == undefined){

       Person.prototype.say = function(){

              alert("I am "+this.name);

              }

       }

}

var p1 = new Person("wang");

var p2 = new Person("li");

p1.say();

p2.say();

alert(p1.say==p2.say); //true

 

结论:一种完美的解决方案。

 
6、对象的创建 - JSON

var person = {};

 

var girl = {

name:“miss wang”,

age:20,

show = function(){

       alert("my name is " + this.name);

}

}

 

继承的实现方式

1、  对象冒充

 

function People(name){

this.name = name;

this.say = function(){

alert("I am "+this.name);

       }

}

function WhitePeople(name){

this.inherit = People;

this.inherit(name);

delete this.inherit;

 

this.color = function(){

              alert("I am white people.");

}

}

var p = new WhitePeople("wang");

p.say();

p.color();

alert(p instanceof People); //false

结论:支持多重继承,但后面的类可以覆盖前面类的属性和方法。继承后的对象类型和父类对象不匹配

 

2、利用call()和apply()冒充

function People(name,age){

this.name = name;

this.age = age;

this.say = function(){

alert("I am "+this.name+"  "+this.age);

       }

}

function WhitePeople(name,age){

//People.call(this,name,age);//call方式以多个参数进行传值

People.apply(this,[name,age]);//apply方式以数组方式进行传值

 

this.color = function(){

              alert("I am white people.");

}

}

var p = new WhitePeople("wang",34);

p.say();

 

p.color();

 

alert(p instanceof People);

 

 

3、原型链继承

//父类

function People(name){

       this.name = name;

}

People.prototype.say = function(){

       alert("I am "+this.name);

}

 

//子类

function ChinaPeople(name,area){

       People.call(this,name);

       this.area = area;

}

ChinaPeople.prototype = new People();

ChinaPeople.prototype.from = function(){

       alert("I'am from "+this.area);

}

 

var p = new ChinaPeople("wang","si chuan");

p.say();

p.from();

alert(p instanceof People); //true

结论:不支持多重继承,继承后的对象类型和父类对象匹配

js自定义对象和类的更多相关文章

  1. JS 自定义对象 属性

    js自定义对象 一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在J ...

  2. js自定义对象.属性 笔记

    <一> js自定义对象 一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtabl ...

  3. js自定义对象

    一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...

  4. js自定义对象 (转)

    原文地址:https://sjolzy.cn/js-custom-object.html 29 March 2010 9:53 Monday by 小屋 javascript进阶之对象篇 一,概述 在 ...

  5. JS自定义对象以及相关成绩系统完整案例演示

    [自定义对象] 1.基本概念 ①对象是拥有一系列无无序属性和方法的集合 ②键值对:对象中的数据,用以键值对的形式存在,对象的每个属性和方法,都对应一个键值,以键取值 ③属性:描述对象特征的一系列变量称 ...

  6. JS自定义对象,正则表达式,JQuery中的一些知识点

    一:自定义对象 1.基本概念:①对象:包含一系列无序属性和方法的集合.②键值对:对象中的数据是以键值对的形式存在的,以键取值.③属性:描述对象特征的一系列变量.[对象中的变量]④方法:描述对象行为的一 ...

  7. Node.js自定义对象事件监听与发射

    一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...

  8. JS 创建自定义对象的方式方法

    一.概述 还记得刚开始做项目的时候,看到别人封装的js工具类百思不得其解,看来看去看不懂,深挖一下,其实就是自己没有耐下心去看,但是遇到问题不解决,总会遇到的,今天还是遇到了,就去找了找帖子,重新思考 ...

  9. JavaScript---网络编程(4)-Date、Math、Global和自定义对象

    本节博客进行Date对象.Math对象.Global对象和自定义对象的用法演示. 首先是一个out.js文件内容(输出到网页中的自定义输出方法): function println(parma){ d ...

随机推荐

  1. Tomcat 500error: Could not initialize class

    Web 项目报错Could not initialize class ,出现500,说明服务器是起来了,可能是这个类的驱动有问题,缺少初始化需要的文件 查到有相关情况: 考虑是jar 包的问题,检查了 ...

  2. 每日一练ACM 2019.0422

    Problem Description 根据输入的半径值,计算球的体积.   Input 输入数据有多组,每组占一行,每行包括一个实数,表示球的半径.   Output 输出对应的球的体积,对于每组输 ...

  3. 每日一练ACM 2019.0417

    Problem Description 给定两个正整数,计算这两个数的最小公倍数.   Input 输入包含多组测试数据,每组只有一行,包括两个不大于1000的正整数.   Output 对于每个测试 ...

  4. linux (ubuntu) 命令学习笔记

    1, md5sum 输出字符串的MD5值 echo -n 123456 | md5sum //-n表示不打印回车符 2, ubuntu设置dock任务栏鼠标点击效果 16.04: 调整位置:gsett ...

  5. 实现PHP服务端和c#客户端数据交换

    服务端实现功能1,数据库的访问dbhelper.php包括执行语句返回多行,返回json数据,返回单条记录,返回第一行第一列的整数,返回第一行第一列的浮点数,返回第一行第一列的双精度数,返回第一行第一 ...

  6. mqtt mosquitto 源码安装

    下载地址 ububtu  : wget https://codeload.github.com/eclipse/mosquitto/zip/master 安装依赖 sudo apt-get insta ...

  7. apache kylin的单节点及多节点安装

    Kylin的使用安装文档Kylin简介Kylin是什么Apache Kylin是一个开源的分布式分析引擎,最初由eBay开发贡献至开源社区.它提供Hadoop之上的SQL查询接口及多维分析(OLAP) ...

  8. 自定义react-navigation的TabBar

    在某些情况下,默认的react-navigation的tab bar无法满足开发者的要求.这个时候就需要自定义一个tab bar了.本文就基于react-navigtion v2来演示如何实现一个自定 ...

  9. JS入门经典第二章总结

    document:在对网页编写脚本时,我们使用document对象代表网页.要引用一个属性,只需在document对象后加一个“.”号,然后再加上要引用的属性名. alert():该函数弹出一个消息框 ...

  10. Python TypeError: 'module' object is not callable 原因分析

    今天尝试使用pprint进行输出,语句为 >>>import pprint >>>pprint(people) 结果报错,TypeError: 'module' o ...