JavaScript进阶【三】JavaScript面向对象的基础知识复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript面向对象知识复习</title>
</head>
<body>
<h2></h2>
<script type="text/javascript">
/************************************************类，成员属性，成员方法******************************************************/
/**
* 定义一个类
* @param name
* @param age
* @constructor
*/
function MyClass(name, age) {
this.name = name;
this.age = age; // 成员方法
this.toString = function () {
alert(cls1.name+":"+cls1.age);
};
}; /**
* 实例化一个cls1对象
* @type {MyClass}
*/
var cls1 = new MyClass("xiugang", 15);
//alert(cls1.name+":"+cls1.age);
cls1.toString(); // 再给这个类的一个对象cls2添加一个方法
var cls2 = new MyClass("zhangsan", 25);
cls2.ShowName = function () {
alert(this.name+":"+this.age);
};
cls2.ShowName(); // 使用Prototype对象来给函数添加方法
function Animal(name, age) {
this.name = name;
this.age = age;
} Animal.prototype.toString = function () {
alert(this.name+":"+this.age);
}; // 实例化两个对象
var dog = new Animal("dog", 15);
dog.toString();
var cat = new Animal("cat", 16);
cat.toString(); // 利用prototype属性给一个类添加多个方法
function Person(name, age) {
this.name = name;
this.age = age;
};
Person.prototype = {
toString : function () {
alert(this.name+":"+this.age);
},
sayHello : function () {
alert("say Hello!");
} }; var student = new Person("小明", 25);
student.sayHello();
student.toString(); /************************************************静态类******************************************************/
var StaticClass = function () { }
StaticClass.name = "StaticClass";
StaticClass.Sum = function (value1, value2) {
return value1 + value2;
};
alert(StaticClass.name+", "+StaticClass.Sum(10, 20)); /************************************************继承******************************************************/
function PeopleClass() {
this.type = "People";
};
PeopleClass.prototype = {
getType : function () {
alert("This is a Person");
}
}; function StudentClass(name, sex) {
// 使用apply方法将父类对象的构造函数绑定到子类对象上
PeopleClass.apply(this, arguments);
this.name = name;
this.sex = sex;
}
var stu = new StudentClass("小红", "女");
alert(stu.type); // 实现了属性的继承 /**
* 实现方法的继承
*/
function Sophermore(name, sex) {
PeopleClass.apply(this, arguments);
// 实现父类方法的继承
/**
* 实现思路： 需要循环将父类对象的prototype进行赋值， 即可达到继承的目的
*/
var prop;
for (prop in PeopleClass.prototype){
var proto = this.constructor.prototype;
if (!proto[prop]){
proto[prop] = PeopleClass.prototype[prop];
}
proto[prop]["super"] = PeopleClass.prototype;
}
this.name = name;
this.sex = sex;
}
var stu2 = new Sophermore("xiuxiu", 22);
alert(stu2.type);
stu2.getType() /**
* 方法二：实现继承的第二种方法， 使用对象冒充的方法
*/
function AnimalNew(name, age) {
this.name = name;
this.age = age; this.Sum = function () {
alert(this.name+","+this.age);
}
}
// 成员方法
/*AnimalNew.prototype = {
sayhello : function () {
alert(this.name+"is saying Hello!");
},
sayAge : function () {
alert(this.name+"'s age is "+this.age);
}
}*/
AnimalNew.prototype.sayHello = function () {
alert(this.name+" is saying Haha!");
} // 子类开始实现继承
function Duck(name, age) {
this.animal = AnimalNew; this.animal(name, age);
} var duck = new Duck("鸭子", 12);
//duck.sayHello(); //error!
//duck.sayAge(); //error!
//duck.sayHello(); //error!
duck.Sum(); //ok的！ /************************************************JavaScript继承知识加强******************************************************/
function Animal(name) {
// 属性
this.name = name; //实例方法
this.sleep = function () {
console.log(this.name+"正在睡觉！");
}
}
// 原型方法
Animal.prototype.eat = function (food) {
console.log(this.name+"正在吃"+food);
} /**
* 方法一： 将父类的实例作为子类的原型, 可以同时实现父类的属性和方法的继承
*/
function Cat() { }
Cat.prototype = new Animal();
Cat.prototype.name = "cat"; // test
var cat =new Cat();
console.log(cat.name);
cat.sleep()
cat.eat("fish");
console.log(cat instanceof Animal);
console.log(cat instanceof Cat); /**
* 方法二： 组合继承
* 通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
*/
function Cow(name) {
Animal.call(this);
this.name = name;
}
Cow.prototype = new Animal();
Cow.prototype.constructor = Cat; var cow = new Cow("小牛博客");
console.log(cow.name);
console.log(cow.sleep());
console.log(cat instanceof Animal);
console.log(cat instanceof Cat); // 利用方法二：组合继承实现继承的综合案例
function Family(name, age) {
// 属性
this.name = name;
this.age = age; // 实例方法
this.Member = function () {
alert("This family is having 5 memnbers now!");
}
}; // 原型方法
Family.prototype = {
sayHello : function () {
alert(this.name +" is saying hello!");
},
sayAge : function () {
alert(this.name +" is saying age:"+this.age);
}
}; // 开始实现继承
function Son(name, age) {
Family.call(this); this.name = name;
this.age = age;
}
Son.prototype = new Family();
Son.prototype.constructor = Family; // 开始测试
var son = new Son("王老大", 15);
alert(son.age+", "+son.age);
son.sayAge();
son.sayHello();
alert(son instanceof Family);
alert(son instanceof Son); </script>
</body>
</html>
JavaScript进阶【三】JavaScript面向对象的基础知识复习的更多相关文章
- PHP基础入门（五）---PHP面向对象实用基础知识
前言: 今天来和大家介绍一下PHP的面向对象.说到面向对象,我不得不提一下面向过程,因为本人在初学时,常常分不清楚面向对象和面向过程,下面就来给大家介绍一下它们的区别: 面向对象专注于由哪个对象来处理 ...
- Objective-C 基础教程第三章,面向对象编程基础知
目录 Objective-C 基础教程第三章,面向对象编程基础知 0x00 前言 0x01 间接(indirection) 0x02 面向对象编程中使用间接 面向过程编程 面向对象编程 0x03 OC ...
- Python学习-第三天-面向对象编程基础
Python学习-第三天-面向对象编程基础 类和对象 简单的说,类是对象的蓝图和模板,而对象是类的实例.这个解释虽然有点像用概念在解释概念,但是从这句话我们至少可以看出,类是抽象的概念,而对象是具体的 ...
- 沙朗javascript总结一下（一）---基础知识
我也听说过Javascript这东西.我一直感觉很神奇,但它并没有去太懂.今天,牛腩哥哥随后的初步研究,一些浅显的认识.就先总结一下. 首先,什么是javascript? javascript是一种直 ...
- 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本
在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...
- JavaScript基础知识复习
1,javascript是基于对象和事件驱动的,并有安全性能的脚本语言: 2,javascript的特点: 1)向HTML中添加交互事件: 2)脚本语言,与java语法类似: 3)解释性语言,边执行边 ...
- 【进阶之路】Redis基础知识两篇就满足（一）
导言 大家好,我是南橘,一名练习时常两年半的java练习生,这是我在博客园的第一篇文章,当然,都是要从别处搬运过来的,不过以后新的文章也会在博客园同步发布,希望大家能多多支持^_^ 这篇文章的出现,首 ...
- 【进阶之路】Redis基础知识两篇就满足（二）
导言 大家好,我是南橘,一名练习时常两年半的java练习生,这是我在博客园的第二篇文章,当然,都是要从别处搬运过来的,不过以后新的文章也会在博客园同步发布,希望大家能多多支持^_^ 这篇文章的出现,首 ...
- Golang 入门系列（三）Go语言基础知识汇总
前面已经了 Go 环境的配置和初学Go时,容易遇到的坑,大家可以请查看前面的文章 https://www.cnblogs.com/zhangweizhong/category/1275863.html ...
随机推荐
- 洛谷 P1198 BZOJ 1012 [JSOI2008]最大数
题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...
- ZOJ - 3483 - Gaussian Prime
先上题目: Gaussian Prime Time Limit: 3 Seconds Memory Limit: 65536 KB In number theory, a Gaussian ...
- SEO 爬虫原理介绍
一篇关于网络爬虫程序的一些原理及体系结构纯技术文章,一些地方可能不会看的非常明确.对于SEO行业,常常和搜索引擎及其爬虫程序打交道,细致浏览下,一些不清楚而自己又非常想了解的地方,能够借助搜索来需找相 ...
- C++设计模式之状态模式(二)
2.智能空调的设计与实现 某软件公司将开发一套智能空调系统: 系统检測到温度处于20---30度之间,则切换到常温状态:温度处于30---45度,则切换到制冷状态: 温度小于20度,则切换到制热状态. ...
- macOS10.9+xcode6编译ffmpeg2.4.2 for ios
近期须要用到ffmpeg开发视频相关.在网上找了些编译资源,自己摸索着,总算编译ok了. 因此,记录下苦逼的编译过程,已祭奠我为之逝去的青春. 1.准备工作 首先.到ffmpeg官网下载最新到代码. ...
- 各种JSON的maven引用
一.jackjson maven <jackjson.version>2.8.8</jackjson.version> <dependency> <group ...
- 在Android系统中修改Android.mk使其同时编译rgb2565和rgb2888（向out/host/linux-x86/bin/下新增加一个工具命令）【转】
本文转载自:http://blog.csdn.net/mu0206mu/article/details/7514559 在Android系统中修改android.mk使其同时编译rgb2565和rgb ...
- this关键字和super关键字
一.this Java中为了解决变量的命名冲突和不确定性问题,引入了关键字this.this代表当前类的一个实例,它经常出现在方法和构造方法中,具体使用情况有以下三种: 1,返回调用当前方法的对象的引 ...
- C# Log4Net简单使用方法
log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具. 使用log4net,一个很明显的好处 ...
- C++中值传递（pass-by-value）和引用传递（pass-by-reference）
1.pass-by-value的情况: 缺省情况C++以pass-by-value(继承C的方式)传递对象至(或来自)函数.函数参数都是以实际参数的复件为初值,调用端所获得的也是函数返回值的一个复件, ...