单体创建对象;工厂模式创建对象;构造函数;原型模式

单体创建对象

面向对象

1、面向过程:所有的工作都是现写现用。

2、面向对象:是一种编程思想,许多功能事先已经编写好了,在使用时,只需要关注功能的运用,而不需要这个功能的具体实现过程。

javascript对象

将相关的变量和函数组合成一个整体,这个整体叫做对象,对象中的变量叫做属性,变量中的函数叫做方法。javascript中的对象类似字典。


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>单体创建对象</title>

<script type="text/javascript">

var Tom = {

// 属性

name:'tom',

age: 18,

//大括号{}:对象,中括号[]:数组

// this相当于python中的self

// 方法

showName:function () {

alert(this.name);

},

showAge:function () {

alert(this.age);

}

}

//调用属性

alert(Tom.name);

alert(Tom.age);

//调用方法

Tom.showName();

</script>

</head>

<body>

</body>

</html>


工厂模式创建对象

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>工厂模式创建对象</title>

<script type="text/javascript">

function person(name,age,job) {

//创建空对象

//var o = new Object();//方式一

var o = {};//方式二

o.name = name;

o.age = age;

o.job = job;

o.showName = function(){

alert(this.name);

}

o.showAge = function(){

alert(this.age);

}

o.showJob = function(){

alert(this.job);

}

return o;

}

var Ancestor = Person('ancestor',18,'大boss');

Ancestor.showJob();

var SYH = Person('syh',20,程序员'');

SYH.showJob();

</script>

</head>

<body>

</body>

</html>


构造函数(new)

<script type="text/javascript">

  function Person(name,age,job){

this.name = name;

      this.age = age;

      this.job = job;

      this.showName =function () {

alert(this.name);

      }

this.showAge =function(){

alert(this.age);

      }

this.showJob =function(){

alert(this.job);

      }

}

//new的作用就相当于工厂模式中最开始创建了一个空对象,最后把对象返回

  var Bob =new Person('bob',18,'张超锐产品汪');

  Bob.showJob();

  var Alex =new Person('alex',19,'楠总是张超锐的老板');

  Alex.showJob();

  alert(Bob.showName ==Alex.showName);//false

</script>


原型模式(prototype)

<!--作用:节省内存-->

<script type="text/javascript">

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

/*大伙一起共享的方法或属性  prototype-原型*/

Person.prototype.showName = function(){

alert(this.name);

}

Person.prototype.showAge = function(){

alert(this.age);

}

Person.prototype.showJob = function(){

alert(this.job);

}

}

//先去自己的对象中找showName函数,再去构造函数的原型找

var Lucy = new Person('lucy',18,'测试鼠');

//重写自身对象中的方法,不会影响其它对象

Lucy.showJob = function(){

alert('我的工作是' + this.job);

}

var Lily = new Person('lily',19,'市场鸡');

Lucy.showJob();

Lily.showJob();

console.log(Lucy.showJob == Lily.showJob);//true

</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容