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面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
随机推荐
- 【Java基础】多态
首先先来个总结: 什么是多态 面向对象的三大特性:封装.继承.多态.从一定角度来看,封装和继承几乎都是为多态而准备的.这是我们最后一个概念,也是最重要的知识点. 多态的定义:指允许不同类的对象对同一消 ...
- Django用户认证系统
一. 认证系统概要 create_user 创建用户 authenticate 验证登录 login 记住用户的登录状态 logout 退出登录 is_authenticated 判断用户是否登录 l ...
- linux,apache,mysql,php常用查看版本信息的方法
1. 查看linux的内核版本,系统信息,常用的有三种办法: uname -a; cat /proc/version; -bash-4.2$ uname -a Linux apphost -.el7. ...
- JS——缓动动画
核心思想: (1)相对于匀速移动,盒子每次移动的步长都是变化的,公式:盒子位置=盒子本身位置+(目标位置-盒子本身位置)/10 (2)在盒子位置与目标距离小于10px时,其步长必然是小数,又由于off ...
- java中“53”个关键字（含2个保留字）
1.java的关键字(keyword)有多少个? 51+2个保留字=53个关键字(java的关键字都是小写的!!) 2.java的保留字(reserve word)有多少个?问题:分别是什么? 2个保 ...
- 查找java文件
想要在eclipse里找一个类文件,可以用快捷键CTRL + SHIFT + R,但是有些文件是jar包里的类文件,可以用下图方法,创建一个变量,然后按住CTRL键,点击类名称 这样就找到jar文件了
- PHP 之websocket实现聊天室功能
一.功能界面 具体的详细代码:https://github.com/yangsphp/websocket-master/tree/master 二.具体代码实现 1.前端代码如下 <!DOCTY ...
- 让System.Drawing.Bitmap可以在linux运行
.net core的bitmap使用的是以下类库,但无法在linux运行 https://github.com/CoreCompat/CoreCompat 在linux运行需要安装runtime.li ...
- 配置Android的NDK开发环境(eclipse)
ndk下载地址: http://blog.csdn.net/zhanghuoding/article/details/51345256 在eclipse设置ndk位置 右键你的工程,android t ...
- Linux之网络文件共享服务(FTP)
一.FTP概念 •File Transfer Protocol 早期的三个应用级协议之一 •基于C/S结构 •双通道协议:数据和命令连接 •数据传输格式:二进制(默认)和文本 •两种模式:服务器角度 ...