20170322js面向对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>创建对象</title>
</head>
<body> <script type="text/javascript">
//创建一个学生对象
var student=new Object();
/*对象的属性*/
student.name="小黑";
student.age=18;
student.address="黄土高坡";
/*对象的行为 函数*/
student.showInfo= function() {
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+student.age+"<br/>");
document.write("地址："+this.name+"<br/>");
}
/*调用方法*/
student.showInfo();
</script>
</body>
</html>
创建对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>通过字面量赋值的方式创建对象</title>
</head>
<body> <script type="text/javascript">
/*创建一个学生对象
* {中的内容是json数据格式}
* 特点就是 ---》
* 属性名1：属性值1,
* 属性名2：属性值2,
* 属性名3：属性值3
*
* student就是一个变量，也是一个对象
* */
var student={
/*对象的属性*/
name:"小黑",
age:50,
address:"地狱",
/*对象的行为 函数*/
showInfo: function () {
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("地址："+this.address+"<br/>");
},
showName:function(){
document.write("姓名："+this.name+"<br/>");
} } /*调用方法*/
student.showName();
student.showInfo(); </script> </body>
</html>
通过字面量赋值的方式创建对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>通过构造函数创建多个对象</title>
</head>
<body>
<script type="text/javascript">
/*Student必须首字母大写 所有对象公用的构造方法*/
function Student(name,age,address){
/*给属性赋值*/
this.name=name;
this.age=age;
this.address=address;
/*设置方法*/
this.showInfo=function(){
document.write("姓名："+this.name+"<br/>")
document.write("年龄："+this.age+"<br/>")
document.write("地址："+this.address+"<br/>")
};
this.showName=function(){
document.write("姓名："+this.name+"<br/>") }
}
//真正的对象
var stu1=new Student("小黑",50,"上海1");
var stu2=new Student("小白",60,"上海2");
var stu3=new Student("小红",70,"上海3"); /*调用对象的方法*/
stu1.showName();
stu2.showName();
stu3.showInfo(); /*所有的对象都有一个constructor属性 指向了构造方法*/
alert(stu1.constructor==Student);
/*instanceof 判断对象是否属于某个类型*/
alert(stu1 instanceof Student);
alert(stu1 instanceof Object); </script>
</body>
</html>
通过构造函数创建多个对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型对象</title>
</head>
<body> <script type="text/javascript">
/*创建一个构造函数*/
function Student(){}
/*每个函数中都有一个prototype(原型对象)
* 这个属性就是一个指针，指向了一个对象！
*
* prototype就是通过构造函数来创建这个对象实例的原型对象！
* */
Student.prototype.name="小黑";
Student.prototype.age=50;
Student.prototype.address="天堂";
/*书写方法*/
Student.prototype.showInfo=function(){
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("地址："+this.address+"<br/>");
};
Student.prototype.showName=function(){
document.write("姓名："+this.name+"<br/>");
}
/*创建对象*/
var stu1=new Student();
stu1.name="哈哈";
stu1.showInfo(); </script> </body>
</html>
原型对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型链</title>
<!-- 原型链： 一个原型对象 是另一个原型对象的实例！
相关的原型对象层层递进，就构成了 实例与原型对象的链条！-->
</head>
<body>
<script type="text/javascript">
/*创建了一个动物构造函数*/
function Animal(){
this.aName="动物类";
}
/*写了一个获取名称的方法*/
Animal.prototype.getName=function(){
return this.aName;
}
/*创建一个小狗狗构造函数*/
function Dog(){
this.dName="小狗";
}
/*Dog原型对象是Animal原型对象的实例*/
Dog.prototype=new Animal();
Dog.prototype.getDogName=function(){
return this.dName;
}
/*创建小狗对象*/
var dog=new Dog();
document.write((dog.getDogName())+"<br/>"); //自身的方法
document.write((dog.getName())+"<br/>"); //父类的方法
document.write((dog instanceof Object)+"<br/>");
document.write((dog instanceof Dog)+"<br/>");
document.write((dog instanceof Animal)+"<br/>"); </script> </body>
</html>
原型链01
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型链</title>
<!-- 原型链： 一个原型对象 是另一个原型对象的实例！
相关的原型对象层层递进，就构成了 实例与原型对象的链条！-->
</head>
<body>
<script type="text/javascript">
/*创建了一个动物构造函数*/
function Animal(){
this.name="动物类";
}
/*写了一个获取名称的方法*/
Animal.prototype.getName=function(){
return this.name;
}
Animal.prototype.sayHello=function(){
return "动物好";
}
/*创建一个小狗狗构造函数*/
function Dog(){
this.name="小狗";
}
/*Dog原型对象是Animal原型对象的实例*/
Dog.prototype=new Animal();
Dog.prototype.getName=function(){
return this.name;
} /*重写父类的方法*/
Dog.prototype.sayHello=function(){
return "小狗好";
} /*创建小狗对象*/
var dog=new Dog();
document.write((dog.getName())+"<br/>"); //自身的方法
document.write((dog.sayHello())+"<br/>"); //父类的方法 var animal=new Animal();
document.write((animal.getName())+"<br/>"); //自身的方法 动物 </script> </body>
</html>
原型链02
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>继承</title>
</head>
<body> <script type="text/javascript">
function Person(){
this.names=["小黑","小红","小豆腐"];
}
function Student(){ }
//让学生继承 Person
Student.prototype=new Person();
//创建一个学生对象
var stu1=new Student();
stu1.names.push("小白");
document.write(stu1.names+"<br/>"); //再创建一个对象
var stu2=new Student();
document.write(stu2.names); </script>
</body>
</html>
继承
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>借用构造函数</title>
</head>
<body>
<script type="text/javascript">
function Person(){
this.names=["小黑","小红","小豆腐"];
} function Student(){
Person.call(this); //继承了 Person
}
//创建一个学生对象
var stu1=new Student();
stu1.names.push("小白");
document.write(stu1.names+"<br/>");
//再创建一个对象
var stu2=new Student();
document.write(stu2.names); //没有小白！ </script> </body>
</html>
借用构造函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>借用构造函数 传递参数</title>
</head>
<body> <script type="text/javascript">
function Person(name){
this.name=name;
}
function Student(){
Person.call(this,"小黑"); //继承了 Person的同时 传递了参数
this.age=50;
}
//创建学生对象
var stu=new Student();
document.write(stu.name+"<br/>");
document.write(stu.age); </script> </body>
</html>
借用构造函数 传递参数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>组合继承</title>
</head>
<body> <script type="text/javascript">
/*构造方法*/
function Person(name){
this.name=name;
this.names=["hei","bai","pei"];
}
Person.prototype.sayHello=function(){
alert(this.name);
} function Student(name,age){
Person.call(this,name);//继承属性
this.age=age;
} Student.prototype=new Person(); //继承了方法
//student特有的方法
Student.prototype.sayBye=function(){
alert(this.names);
}
/*创建对象*/
var stu=new Student("小嘿嘿",50);
stu.names.push("小白白");
document.write(stu.names+"<br/>")
stu.sayHello();
stu.sayBye(); var stu1=new Student("小嘿嘿2",50);
document.write(stu1.names+"<br/>");
stu1.sayHello();
stu1.sayBye(); </script> </body>
</html>
组合继承
20170322js面向对象的更多相关文章
- angular2系列教程（六）两种pipe：函数式编程与面向对象编程
今天,我们要讲的是angualr2的pipe这个知识点. 例子
- 一起学 Java（二）面向对象
一.方法函数 函数也称为方法,就是定义在类中的具有特定功能的一段独立代码.用于定义功能,提高代码的复用性. 函数的特点1> 定义函数可以将功能代码进行封装,便于对该功能进行复用:2> 函数 ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- .NET 基础 一步步 一幕幕[面向对象之对象和类]
对象和类 本篇正式进入面向对象的知识点简述: 何为对象,佛曰:一花一世界,一木一浮生,一草一天堂,一叶一如来,一砂一极乐,一方一净土,一笑一尘缘,一念一清静.可见"万物皆对象". ...
- 简单分析JavaScript中的面向对象
初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...
- Java程序员应该了解的10个面向对象设计原则
面向对象设计原则: 是OOPS(Object-Oriented Programming System,面向对象的程序设计系统)编程的核心,但大多数Java程序员追逐像Singleton.Decorat ...
- JavaScript学习笔记(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
随机推荐
- MaBatis配置（单配置 之一）
注: 此文中的实体类还是沿用上一章的Emp和Dept两个类 .引入需要的jar包文件:http://pan.baidu.com/s/1qYy9nUc :mybatis-3.2.2.jar .编写MyB ...
- 如何调用com组件中包含IntPtr类型参数的函数
背景 公司的支付平台最近对接了西安移动的支付接口,接口中签名的方法是对方提供了一个com组件,组件中包含了一个签名的方法和一个验签的方法,注册了签名之后,在vs中进行了引用,引用之后,查看组件的定义如 ...
- 【转】Java中的String为什么是不可变的？ -- String源码分析
什么是不可变对象? 众所周知, 在Java中, String类是不可变的.那么到底什么是不可变的对象呢? 可以这样认为:如果一个对象,在它创建完成之后,不能再改变它的状态,那么这个对象就是不可变的.不 ...
- js基础---数据类型转换
js中数据类型: 简单数据类型: number:233,-34,0x23,023 string:"hello"或者'hello' boolean:true.false undefi ...
- html中保证中文能够正常显示
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8"/> ...
- VC++ 遍历文件夹
}; strcpy_s(szFind, MAX_PATH, m_szDir); strcat_s(szFind, "\\*.*"); WIN32_FIND_DATA wfd; HA ...
- 文件下载之ServletOutputStream
使用response.getOutputStream可以获取ServletOutputStream,从而实现向页面发送流数据.但是需要注意的是,不能使用ajax进行请求,因为这样页面不会有任何反应,可 ...
- async await 同步方法调用异步方法死锁
同步方法调用异步方法.GetAwaiter().GetResult()计算函数超时,异步方法所有的回调操作都会期望返回到主线程. 所以会导致各种线程死锁.异步方法中使用ConfigureAwait(f ...
- centOS7卸载google-chrome
参考: https://www.jianshu.com/p/39d0b8f578d9
- CPU指令、机器码、程序和汇编语言
一.指令 指令就是指挥机器工作的指示和命令.控制器靠指令指挥机器工作,人们用指令表达自己的意图,并交给控制器执行.一台计算机所能执行的各种不同指令的全体,叫做计算机的指令系统或指令集,每一台计算机均有 ...