创建对象的方式:

1)单体

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象——单体</title>
<script type="text/javascript"> var Tom = { name: 'tom',
age:18, showname:function(){
alert(this.name);
}, showage:function(){
alert(this.age);
}
}; alert(Tom.age);
Tom.showname(); </script>
</head>
<body>
</body>
</html>

2)工厂模式:通过一个函数来创建对象(开料、装配、出厂)

<!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(); o.name = name;
o.age = age;
o.job = job; o.showname = function () {
alert(this.name);
}; o.showage = function () {
alert(this.age);
}; return o;
} var Tom = Person('tom',18,'engineer');
Tom.showname();
Tom.showage() </script>
</head>
<body>
</body>
</html>

3)构造函数(方法重复,缺点是占用内存)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数</title>
<script type="text/javascript"> function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.showname = function () {
alert(this.name);
}
} var Tom = new Person('tom',18,'engineer');
Tom.showname() </script>
</head>
<body>
</body>
</html>

4)原型模式(创建类)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型模式</title>
<script type="text/javascript"> function Person(name,age,job) { this.name = name;
this.job = job;
this.age = age; } //在prototype上绑定方法,该方法可以实现不同实例的共用
Person.prototype.showname = function () {
alert(this.name);
}; var Tom = new Person('tom',18,'engineer');
var Jack = new Person('jack',19,'worker');
Tom.showname();
Jack.showname(); </script>
</head>
<body> </body>
</html>

继承:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承</title>
<script type="text/javascript"> function Fclass(name,age) { this.name =name;
this.age = age;
} Fclass.prototype.showname = function () {
alert(this.name);
};
Fclass.prototype.showage = function () {
alert(this.age);
}; //属性继承:用call或者apply的方法继承
function Sclass(name,age,job) {
//改变当前函数执行的this对象:指向了子类实例化的对象
// call:aa.call('abc',2,3)
//apply:aa.apply('abc',[2,3])
Fclass.call(this,name,age); this.job = job; }
//方法继承:将父类的一个实例赋值给子类的原型属性
Sclass.prototype = new Fclass();
Sclass.prototype.showjob = function(){
alert(this.job);
}; var Tom = new Sclass('tom',18,'engineer'); Tom.showage();
Tom.showname();
Tom.showjob(); </script>
</head>
<body> </body>
</html>

JS——面向对象、继承的更多相关文章

  1. js面向对象继承

    前言 最近看到js面向对象这章节了,主要学习了原型和面向对象继承关系,为了梳理自己的知识逻辑,特此记录. js的面向对象 先说说我目前了解的js创建对象方法 1.写一个函数,然后通过new创建对象 2 ...

  2. js面向对象 继承

    1.类的声明 2.生成实例 3.如何实现继承 4.继承的几种方式 1.类的声明有哪些方式 <script type="text/javascript"> //类的声明 ...

  3. 关于JS面向对象继承问题

    1.原型继承(是JS中很常用的一种继承方式) 子类children想要继承父类father中的所有的属性和方法(私有+公有),只需要让children.prototype=new father;即可. ...

  4. js 面向对象 继承

    继承方式有四种: 1.call 2.apply 3.prototype 4.for in call 和 apply 的主要区别: call 传参数只能一个一个的传, apply 因为是用数组,所以可以 ...

  5. JS 面向对象 ~ 继承的7种方式

    前言: 继承 是 OO 语言中的一个最为人津津乐道的概念.许多 OO 语言都支持两种继承方式:接口继承 和 实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在 ...

  6. js 面向对象 继承机制

    根据w3cschool上的描述:共有3种继承方法(对象冒充,原型链,混合) 1.对象冒充:构造函数ClassA使用this关键字给所有属性和方法赋值,使ClassA构造函数成为ClassB的方法,调用 ...

  7. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  8. JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  9. js面向对象之继承那点事儿根本就不是事

    继承 说道这个继承,了解object-oriented的朋友都知道,大多oo语言都有两种,一种是接口继承(只继承方法签名):一种是实现继承(继承实际的方法) 奈何js中没有签名,因而只有实现继承,而且 ...

  10. 捋一捋js面向对象的继承问题

    说到面向对象这个破玩意,曾经一度我都处于很懵逼的状态,那么面向对象究竟是什么呢?其实说白了,所谓面向对象,就是基于类这个概念,来实现封装.继承和多态的一种编程思想罢了.今天我们就来说一下这其中继承的问 ...

随机推荐

  1. bzoj 1185 最小矩形覆盖 —— 旋转卡壳

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1185 枚举一条边,维护上.左.右方的点: 上方点到这条边距离最远,所以用叉积求面积维护: 左 ...

  2. org.springframework.web.client.HttpClientErrorException: 400 null

    异常代码: org.springframework.web.client.HttpClientErrorException: 400 null 已解决. 百度了一下400代表无法解析请求. 说明请求是 ...

  3. js中this

    首先声明,我是小白,以下只是自己的简单理解. 先看下面的代码: (function () { console.log(this); })(); 毫无疑虑,输出的是window. 在看下面代码: (fu ...

  4. ES6学习之字符串的扩展

    字符的Unicode表示法 \uxxxx可以表示一个双字节的字符(xxxx表示字符编码,范围在0000---FFFF),超出此范围用两个双字节表示. console.log("\u0061& ...

  5. 【总结整理】javascript进阶学习(慕课网)

    数组 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 二维数组 二维数组 一维数组,我们看成一组盒子,每个盒子只能放一个内容. 一维数组的表示: ...

  6. WSDL入门

    WSDL: 网络服务描述语言, 是Web Service的描述语言,它全名:Web Services Description Language,是一门基于 XML 的语言,用于描述 Web Servi ...

  7. 面试题: mysql 数据库去重 已看1 不好使

    mysql去重面试总结 前言:题目大概是这样的. 建表: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 CREATE TABLE `test2` (   `id` ...

  8. Learning Python 010 函数 1

    Python 函数 1 调用函数 举个例子 多于Python内部的函数,你可以在Python的交互式终端中使用help()函数来查看函数的使用方法.比如:abs()函数,如果你不知道如何使用它,你可以 ...

  9. Ubuntu 12.04 LTS为例演示vsftpd虚拟用户 的配置

    vsftpd虚拟用户   2012-05-19 15:46:59|  分类: GNU/Linux |  标签:ubuntu  vsftpd  ftp  虚拟用户  |举报|字号 订阅 我们登录FTP有 ...

  10. GCC源码编译

    1. gcc源码下载 ftp://gcc.gnu.org/pub/gcc/releases/ [yhwang@yhwang ~] wget ftp://gcc.gnu.org/pub/gcc/rele ...