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面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
随机推荐
- Struts之 拦截器配置 ( Interceptor )
struts2体系结构的核心就是拦截器. 以链式执行,对真正要执行的方法(execute())进行拦截.首先执行Action配置的拦截器,在Action和Result执行之后,拦截器再一次执行(与先前 ...
- sql server 无法创建数据库，错误代码：1807
SQL Server 不能创建数据库,发生错误:1807 :未能获得数据库 'model' 上的排它锁.请稍后重试操作. declare @sql varchar(100) while ...
- Educational Codeforces Round 42 (Rated for Div. 2)
A. Equator(模拟) 找权值的中位数,直接模拟.. 代码写的好丑qwq.. #include<cstdio> #include<cstring> #include< ...
- activiti 表——介绍
Activiti 用到的表都是act_开头 下面分别来介绍下 activiti 所用到的表: Act_RE_* 表示 RepositoryService接口所操作的表:包含了流程定义信息 .流程静态资 ...
- 个人作业——Alpha项目测试
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/ 这个作业要求在哪里 https://edu.cnbl ...
- brew update失败提示：/System/Library/Frameworks/Ruby.framework/的解决方法
本文由@ray 出品,转载请注明出处. 文章链接:http://www.cnblogs.com/wolfray/p/8040701.html 想用brew安装wget,但是提示失败,然后想先 bre ...
- ajax不跳转页面的快速删除操作，可添加美观样式
以前我们讲的删除是利用嵌入php代码,跳转到另一个页面,从而降低了删除速度,但我们今天讲的利用ajax不仅可以达到不跳页面快速删除,并且能添加特效来美化页面. 上代码,我们先来做主页面 <!DO ...
- UltraEdit(UE)window破解方法
安装UltraEdit(一路下一步,无难点)成功后,打开软件弹出如下使用模式提示信息. 关掉UltraEdit软件,同时 断本机网络.重新打开UltraEdit软件: 点击[输入许可证密 ...
- 依存分析 Dependency Parsing
依存分析 Dependency Parsing 句子成分依存分析主要分为两种:句法级别的和语义级别的 依存句法分析 syntactic dependency parsing 语义依存分词 semant ...
- Caffe2：添加CUDA路径
在使用Eclipse时候,仍然出现 libcuda.so 找不到的情况..... 原因:cuda环境没有设置到系统环境中. 方案: 设置CUDA path: 在bashrc中添加路径,只对当前用户产生 ...