0
点赞
收藏
分享

微信扫一扫

Javascript复习 及 面向对象写法

星巢文化 2022-10-12 阅读 115
javascriptfunctionjsonbuttonlayer系统/运维


ExtJs北风网学习总结

1.       JavaScript数据类准换

转换为Number：根据parseInt()来转化。

转换String：任何类型加字符串即为字符串。

转换Boolean：true,false,所有非0数字为true,否则为false

Undefind  / null 直接转换为false

 

2.       JavaScript数据专递

 基本数据类型采用值传递：

 

3.       JavaScript语法  函数与事件

函数和事件通常是一种绑定关系，通过事件调用函数。如果绑定多个函数，中间用分号隔开。

l       常用事件

l       Onload

l       OnClick

l       MouseOver 鼠标移动到指定目标上

l       MouseOut 鼠标离开指定目标

l       Focus 当元素获得焦点

l       Blur 当元素失去焦点

l       Change 1.输入内容发生改变，2.select选项发生改变

l       Onkeyup 键盘案件弹起

l       常用事件

l       Onload

l       OnClick

l       MouseOver 鼠标移动到指定目标上

l       MouseOut 鼠标离开指定目标

l       Focus 当元素获得焦点

l       Blur 当元素失去焦点

l       Change 1.输入内容发生改变，2.select选项发生改变

l       Onkeyup 键盘案件弹起

 

4.       JavaScript面向对象编程

JavaScript定义属性和方法

方法一：

function Test(){
      //javascript定义属性
       Test.prototype.name="zsw";
       //javascript定义方法
       Test.prototype.say = function(){
              alert(this.name + " love hy!");
       };
}
 
function a(){
       new Test().say(); //javascript调用方法
}

 

  方法二：

function boy(){
       //js通过this定义属性
       this.name = "zsw";
       this.age = 21;
       //js通过this定义方法
       this.say = function(){
              alert(this.name + " love hy!");
       }
};
 
function b(){
       var _boy = new boy();
       alert(_boy.name);
       alert(_boy.age+"");
       _boy.say();
};

总结:

定义属性，方法

1.使用prototype创建

2.使用this创建

 

 

5.       Json的方式创建对象

var json = {name:'zsw',age:20};
       alert(json.name);

 

function showName(o){
       alert(o.name);
       alert(o["name"]);
}
 
function showObject(){
       var json = "{name:'zsw',age:20}";
       
       
       showName(eval（"("+json+")"));
}

 

Json对象是可以传递的

原理：JSON可以在字符串和对象间转换。

可以通过JavaScript的eval（)方法将字符串转换成对象。

 

6．动态添加属性和方法

function test1(){};
function runTest1(){
       var t1 = new test1();
       t1.name = "zsw";
       t1.age = 21;
       t1.say = function(){
              alert("Hello World!!!");
       };
       alert(t1.name);
       t1.say();  
};

 

7.在内置对象添加属性和方法

 

 

8.Javascript面向对象中的继承

function Person(){
       Person.prototype.name = "zsw";
       Person.prototype.age = 21;
       Person.prototype.say = function(){
              alert("Javascript 面向对象的继承");
       };
}
 
function Student(){
       Student.prototype.schoolName = "bdqn";
}
 
function TestStu(){
       Student.prototype = new Person();
       var s = new Student();
       alert(s.schoolName);
       s.say();
}

 

9．定义私有属性

function Person(){
       Person.prototype.name = "zsw";
       Person.prototype.age = 21;
       Person.prototype.say = function(){
              alert("Javascript 面向对象的继承");
       };
}
 
function Student(){
       Student.prototype.schoolName = "bdqn";
       //定义私有属性
       var gfName = "hy";
}
 
function TestStu(){
       Student.prototype = new Person();
       var s = new Student();
       alert(s.schoolName);
       s.say();
       
       alert(s.gfName); //不可见，因为访问的私有属性
 
}

 

10.定义静态属性

function Person(){
       Person.prototype.name = "zsw";
       Person.prototype.age = 21;
       Person.prototype.say = function(){
              alert("Javascript 面向对象的继承");
       };
}
 
function Student(){
       Student.prototype.schoolName = "bdqn";
       //定义私有属性
       var gfName = "hy";
       Student.cityName = "深圳";
}
 
function TestStu(){
       Student.prototype = new Person();
       var s = new Student();
       alert(s.schoolName);
       s.say();
       
       alert(s.gfName); //不可见，因为访问的私有属性
       
       //访问静态属性
       alert(Student.cityName);
}

 

 

11.Json对象

定义Json对对象，在对象中添加属性：

function jsonTest(){
       var jsonObj = {
              name:'周尚武',
              sex:'男',
              age:21
       };
       
       alert(jsonObj.name);
}

Json添加方法：

function jsonTest(){
       var jsonObj = {
              name:'周尚武',
              sex:'男',
              age:21,
              say:function(){
                     alert("Json对象中添加方法!");
              }
       };
       
       alert(jsonObj.name);
       jsonObj.say();
}

Json添加子对象：

function jsonTest(){
       var jsonObj = {
              name:'周尚武',
              sex:'男',
              age:21,
              say:function(){
                     alert("Json对象中添加方法!");
              }
       };
       
       alert(jsonObj.name);
       jsonObj.say();
       
       
       var jsonArray = ["A","B","C"];
       alert(jsonArray[0]);
}

在此复习一下静态方法

function test(){
       test.prototype.name="huangyi";
       test.cityName="深圳";
}
function T(){
       alert(test.cityName); //将输出undefined
}

以上调用test.cityName必须先把test实例化一下：

function test(){
       test.prototype.name="huangyi";
       test.cityName="深圳";
}
function T(){
       new test();
       alert(test.cityName);
}

总结：

Javascript面向对象和所有面向对象编程语言一样，都是通过实例化的方式进行访问，两个对象间的非静态变量不会被干扰。

JSON中，属性可以是方法，甚至可以是一个子对象。

使用静态变量，需要实例化一下function，告诉浏览器它不是函数，而是对象。

 

 

12.方法覆盖

function test(){
       test.prototype.name = "zsw";
       test.prototype.age = 21;
       test.prototype.say=function(){
              alert("Hello World!");
       }
}
 
function T(){
       var t = new test();
       t.say = function(){
              alert("你好!");
       }
       t.say();
}

 

13.重写window.alert();提示框

<script type="text/javascript">
function run(){
       window.alert = function(s){
              var o = document.getElementById("Layer1");
              o.innerHTML = "<input name='button' type='button' οnclick='closeWin()' value='关闭' />"+s;
              o.style.display = "block";
       }
       
       window.show = function(s){
              alert(s);
       }
       
       show('zsw love hy！！');
}
 
function closeWin(){
       var o = document.getElementById("Layer1");
       o.style.display = "none";
}
</script>
<style type="text/css">
<!--
#Layer1 {
       position:absolute;
       left:341px;
       top:168px;
       width:296px;
       height:142px;
       z-index:1;
       color:#FFFFFF;
       display:none;
       background-color:#00CC99;
}
-->
</style>
</head>
 
<body>
<div id="Layer1">
  
</div>
<input type="button" value="点击" οnclick="run()" />
</body>

 

补充：javascript复制继承法

<mce:script type="text/javascript"><!--
  function dw(s){
    alert(s);
  }
  
  Function.prototype.extend_p = function(obj){
    for(var i in obj){
      this.prototype[i] = obj[i];
    }
  }
  
  Person = function(){
    this.name = "accp";
    this.setName = function(obj){
      this.name = obj;
    }
    this.getName = function(){
      return this.name;
    }
  }
  
  
  Student = function(){
  
  }
  
  Student.extend_p(new Person());
  
  var s = new Student();
  s.setName('黄翊');
  dw(s.getName());
  
// --></mce:script>

 

Javascript 原始继承法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript原始继承法</title>
<mce:script type="text/javascript"><!--
  function ds(s){
    alert(s);
  }
  
  Person = function(){
    this.name = "hy";
    this.setName = function(obj){
      this.name = obj;
    }
    this.getName = function(){
      return this.name;
    }
  }
  
  Student = function(){
    this.stuNo = "0001";
  }
  
  Student.prototype = new Person();
  
  var stu = new Student();
  
  stu.setName('黄翊');
  alert("名字："+stu.getName());
  alert("编号："+stu.stuNo);
// --></mce:script>
</head>
<body>
</body>
</html>

 

举报

相关推荐

4JavaScript对象及初识面向对象

原型模式javascriptjava

面向对象的复习

p2pfpga开发网络协议

python面向对象复习

python

JavaScript 面向对象

初始化构造函数私有属性JavaScript前端开发

JavaScript面向对象

构造函数面向对象js面向对象JavaScript前端开发

【JavaScript面向对象】

javascript前端es6

JavaScript 面向对象详解

javascript原型对象构造函数Python后端开发

JavaScript之面向对象

插入图片html字符串yyds干货盘点

JavaScript(03): 面向对象

javascript数组面向对象构造函数HarmonyOS后端开发

JAVA复习之面向对象编程

抽象类多态java父类匿名内部类Java编程语言
0 条评论