AJAX学习前奏----JS基础加强

知识概要:

1.js类&属性&方法的定义

2.静态属性与方法

3.构造方法

4.原型的使用

5.Object对象直接加属性和方法

6.JSON数据

7.继承关系的模拟

8.重载的模拟

9.with语句与forin语句

1.js类&属性&方法的定义

类的定义:

一个函数就是一个类                如何定义私有属性,私有的用var声明,公有的用this声明

<title>js模拟类的相关概念</title>

<script type="text/javascript" src="01jquery.js"></script>

<script>

function Person(){

var name="张三丰";//私有的属性

this.age = 30;//公有的属性

var showInfo = function(){//私有方法,只能调用私有属性

alert(name);

}

//公有方法,属性都能用(公有的,私有的)

this.showInfo = function(){

showInfo();

alert(name+","+this.age);

}

}

var p = new Person();//产生对象

alert(p.name);//undefined

alert(p.age);//30

p.showInfo();//不支持这个方法,不能调用

</script>

2.静态属性&静态方法

<script>

function Person(){

this.name="刘小晨";

this.age=18;

}

Person.sex="女";//静态属性

//静态方法

Person.showInfo = function (){//静态方法

alert(this.name+","+this.age+Person.sex);

}

//静态的调用形式:类名.属性名或方法名

alert(Person.sex);//女

Person.showInfo();//undefined,undefined,女(带“this”的通常表示实例对象)

var p = new Person();  //产生一个实例对象

alert(p.name+","+p.age+","+Person.sex);//刘小晨,18,女

p.showInfo();//不以调

</script>

类名.属性名或方法名定义   访问也是类名.属性名或方法名   不能用对象调用

3.构造方法       (有参数的构造函数&无参数的构造函数)

//------------------5.构造方法------------------------------------------------------------------

//1.无参构造

//2.有参构造

//有参构造

function Person(name,age){

this.name = name;

this. age  = age;

}

//无参构造

function Person(){          //如果出现同名参数后,会出现函数的重写

this.name="王康";

this.age = 20;

}

var p = new Person("陈佳",21);

alert(p.name+","+p.age);

var pp = new Person();

alert(pp.name+","+pp.age);

4.原型的使用:

示例:

Array.prototype.getMax = function(){

var max = this[0];

for(var i=1;i<this.length;i++){

if(max<this[i])

max =this[i];

}

return max;

}

var score = [30,50,67,10,80,45];

function getMax(arr){

var max = arr[0];

for(var i=1;i<arr.length;i++){

if(max<arr[i])

max =arr[i];

}

return max;

}

score.sort();

var maxVal = score.getMax();

//var maxVal = getMax(score);

alert(maxVal);

alert(score);   增序打印输出

function Person(){

this.name="苏周周";

this.age = 18;

this.hobby =  ["爱avi","拍avi","实战avi"];

}

//prototype找原型

Person.prototype.sex = "男人";

Person.prototype.hobby = ["爱avi","拍avi","实战avi"];

var p = new Person();

p.hobby.push("打鸟");

alert(p.hobby);

var p2 = new Person();

alert(p2.hobby);

5.直接用Object对象或函数对象加属性与方法

1直接用Object对象,再去定义属性和方法

var obj = new Object();

obj.name="齐航";

obj.age = 18;

obj.北京市=["海淀","昌平","东城"];

obj["朝阳市"] = ["朝北","朝东","朝西"];

obj.showInfo = function (){

alert(obj.name+","+obj.age+","+obj.朝阳市.join("~~~~~~~"));

}

//调用

obj.showInfo();

//先定义函数对象,再去定义属性和方法

function Person(){

}

var p = new Person();

p.name="齐航";

p.age = 18;

p.北京市=["海淀","昌平","东城"];

p["朝阳市"] = ["朝北","朝东","朝西"];

p.showInfo = function (){

alert(p.name+","+p.age+","+p.朝阳市.join("~~~~~~~"));

}

//调用

p.showInfo();

6 JSON数据

//json主要作用是一种当前最流行的数据交换格式

//新浪开放平台http://sina.com/dsfs/sdfs/sdddfds----->json

//在于解析方便,而且传输数据量少

1.json对象<-----数据库表

var p = {

name:"张杰",

age:29,

sex:"男",

showInfo:function()

{

alert(this.name+","+this.age);

}

};

//2.json数组

var list = [{name:"张杰",age:29,sex:"男"},{name:"张杰2",age:22,sex:"男2"},{name:"张杰3",age:23,sex:"男3"}];

alert(p.name+","+p.age+","+p.sex);

alert(list[1].name);

p.showInfo();

7. 方法的继承和重写

/要使用原型来进行模拟

function Person(){

this.name="郑志强";

this.age = 20;

this.showInfo = function(){

alert("hello");

}

}

function Student(){

this.score = 100;

}

var p = new Person();

//继承

Student.prototype = p;//继承

//重写

Student.prototype.showInfo = function(){

alert(this.name+","+this.age+","+this.score);

}

var stu = new Student();

stu.showInfo();

p.showInfo();//也是重写之后的方法

----------------------重载(分而治之)---------------------------------

function add2(x,y){

return x+y;

}

function add3(x,y,z){

return x+y+z;

}

function add4(x,y,z,q){

return x+y+z+q;

}

//同名的函数只会调用最后一个函数

function add(){

if(arguments.length==2){

return add2(arguments[0],arguments[1]);

} else if(arguments.length==3){

return add3(arguments[0],arguments[1],arguments[2]);

}else if(arguments.length==4){

return add4(arguments[0],arguments[1],arguments[2],arguments[3]);

}else{

return "你有病,不支持!!";

}

}

// var result = add(10);

// var result = add(10,20,30,40,50);

var result = add("dfds10","fsdfdsf20");

// var result = add(10,20,30);

//  var result = add(10,20,30,40);

alert(result);

8.with 与forin 语句

with语句与for..in语句

function Person(){

this.name = "刘岳林";

this.age = "20";

this.showInfo = function(){

alert(this.name+","+this.age);

}

}

var p = new Person();

alert(p.name);

alert(p.age);

p.showInfo();

//with语句,用于指定要访问的对象是谁

var p = new Person();

with(p){

alert(name);

alert(age);

showInfo();

}

For in

for..in用于访问对象的属性和方法

var p = new Person();

for(var i in p){

if(p[i] instanceof Function){

p[i]();//调用方法

}

else{

alert(p[i]);

}

}

AJAX学习前奏----JS基础加强的更多相关文章

  1. 9.29学习的js基础

    js基础 1.三种js引入方式    a).<input type="button" value="点击事件" onClick="documen ...

  2. 使用eclipse初步学习vue.js基础==》v-for的使用 ②

    一.步骤演示 1. 新建一个jsp文件 2. 把vue.js放到Web的js目录下 3. 在jsp中引入vue.js <script src="${pageContext.reques ...

  3. 1. JavaScript学习笔记——JS基础

    1. JavaScript基础 1.1 语法 严格区分大小写 标识符,第一个字符可以是 $,建议使用小驼峰法, 保留字.关键字.true.false.null不能作为标识符 JavaScript是用U ...

  4. (初学JS)JS基础——ATM机终端程序编写<1.0>

    初步学习了JS基础,为了更好地将所学知识熟练运用,我进行了银行ATM存取款机的模拟程序编写,主要通过VScode终端实现系列操作. 我的ATM程序包括6个主要功能:1.查询余额 2.存钱 3. 取钱 ...

  5. JS基础学习——对象

    JS基础学习--对象 什么是对象 对象object是JS的一种基本数据类型,除此之外还包括的基本数据类型有string.number.boolean.null.undefined.与其他数据类型不同的 ...

  6. JS基础学习——闭包

    JS基础学习--闭包 什么是闭包 闭包的定义如下,它的意思是闭包使得函数可以记住和访问它的词法范围,即使函数是在它声明的词法范围外执行.更简单来讲,函数为了自己能够正确执行,它对自己的词法范围产生闭包 ...

  7. JS基础学习——作用域

    JS基础学习--作用域 什么是作用域 变量的作用域就是变量能被访问到的代码范围,比如在下面的这个js代码中,变量a的作用域就是函数foo,因此在全局作用域内的console.log(a)语句不能访问到 ...

  8. JS基础学习1

    1 JS 概述 一个完整的javascript实现是由以下3个不同部分组成的: (1)     核心(ECMAscript) (2)     文档对象模型(DOM)  Document object ...

  9. 【JS基础语法】---学习roadmap---6 parts

    JS基础语法---roadmap Part 1 - 2: Part 3 - 4:   Part 5 - 6

随机推荐

  1. html5 canvas元素使用(一)

    html5新增了一个canvas元素,用于在网页上生成一块矩形区域,用于绘制图像,功能非常强大,下面我来简单介绍一下 在页面中添加canvas <canvas id="canvasDe ...

  2. 在STEP7 TIA PORTAL中,设置模块的地址和设备名(Device name)

    assign device name, ip address for PROFINET componet in TIA Portal 方法1: PLC --> online & diag ...

  3. unity3d在菜单栏,一键设置Player setting及自动打包并设置apk的存储位置

    项目进行中,领导要求能够进行一键设置Player settings及自动打包并设置apk的位置,所以自己就上网搜索了很多大神的文章.最后是完成了领导需要的功能,在这里记录并分享一下(此项指针对安卓ap ...

  4. 【2017集美大学1412软工实践_助教博客】团队作业9——测试与发布(Beta版本)

    题目 团队作业9--测试与发布(Beta版本)(http://www.cnblogs.com/happyzm/p/6917253.html) 团队作业9-1 测试与发布成绩 分值 1 0.5 0.5 ...

  5. 201521123006 《Java程序设计》第1周学习总结

    1. 本章学习总结 (1)java在使用的过程中可以发现其本身有着许多为了节约资源而作的设计,而java根据其应用领域分为了三大平台:Java SE.Java ME与Java EE.在本周的学习中我们 ...

  6. 201521123067《Java程序设计》第1周学习总结

    1.本周学习总结 在本周的java学习中,我知道了java的发展历程,JDK和JRE以及JVM的区别与联系,并学习了如何安装Eclipse和搭建java的环境,编写出了第一个java程序,明白了jav ...

  7. 解决"应用程序无法启动,因为应用程序的并行配置不正确"问题

    想必不少人都会遇到题目中的问题.我在一次和舍友一起重装系统的时候变遇到了上述的问题, 经过仔细分析发现电脑会出现上述问题所必要的条件 系统中没有存在合理的运行库文件 所运行的软件是之前重装系统之间留下 ...

  8. Java-高效地使用Exception-实践

    注:本文翻译自Exceptional practices,共分为3节.该文章从实践的角度非常透彻地解释了为什么要处理异常,以及如何处理异常.这些都是那些只会介绍trycatchfinally语法的教材 ...

  9. 手写Maven的archetype项目脚手架

    一.背景 maven是一个很好的代码构建工具,采用“约定优先于配置”的原则进行项目管理,相信很多的java开发者应该都了解maven并可能在工作当中都是通过maven来管理项目的,在创建的项目的时候, ...

  10. Geronimo tomcat: 在 Apache Geronimo 插件体系中将 Apache Tomcat 这个优秀的 Web 容器整合至其中

    Apache Geronimo 灵活的插件体系将 Tomcat, OpenJPA, OpenEJB, ActiveMQ 等第三方组件集成至其中.本文从多角度介绍了在 Apache Geronimo 中 ...