面向对象javascript

最新推荐文章于 2024-03-24 02:40:13 发布

wv112406

最新推荐文章于 2024-03-24 02:40:13 发布

阅读量81

点赞数

分类专栏： JS 文章标签： JavaScript prototype C C++ C# ViewUI

本文链接：https://blog.csdn.net/wv112406/article/details/83469378

版权

JS 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

面向对象javascript

类型测试:
typeof(Function)
typeof(new Function())
typeof(Object)
typeof(Array)
typeof(Date)
typeof(new Object)
typeof(new Array())
typeof(new Date())
前5返回function,后3返回object
Function是所有函数对象的基础,Object是所有对象的基础.通过修改Object的prototype可以修改所有对象的属性和方法

用Function类型new 出的函数(function)其实返回的是function,而用Array,Object,Date类型new出来的返回其实的是一个普通对象.
用new Function返回的函数(function)本身也是一个对象,但异于普通对象,我们一般称内部对象(Function,Object,Array,Date,Math等)为构造器，所有的构造器都是对象。
所以Function的作用就是可以给函数对象定义一些属性和方法,借助函数的prototype对象可以修改和扩充Function类型的定义
=======================================================================================
二:函数
1: function functionname1(a,b,c){return a+b+c;} 一个名称为functionname1函数
2: var functionname2=function(a,b,c){return a+b+c;} 把一个匿名函数赋给functionname2
3: var functionname3=function functionname(a,b,c){return a+b+c;} 把一个函数functionname赋给functionname2
4: var functionname4=new Function("a,b,c","return a+b+c;")
5: var functionname5=new Function("a,b","c","return a+b+c;")
6: var functionname6=new Function("a","b","c","return a+b+c;")
12345等价
=======================================================================================
三:对象:
1: var instance1=new functionname1(1,2,3); functioninstance1是functionname1的一个实例
2:无类型对象
var instance2={
   a:1,
   b:2,
   c:3
   }
=======================================================================================
四:类及设计模式
1:定义:用function关键字定义一个类
function classname(){
//构造函数
}
---------------------------------------------------------------------------------------
2:可以使用prototype对象定义类成员
classname.prototype.someProperty="sample";
classname.prototype.someMethod=(){
//方法实现
}
或者:
classname.prototype={
someProperty:"sample",
someMethod:function(){
  //方法代码
},
...//其他属性和方法
}
---------------------------------------------------------------------------------------
3:公有成员私有成员和静态成员
私有:类内部定义的成员(无this指针的)，不对外公开,构造函数内的局部变量间是共享的,也就是说可以被嵌套的函数(可以是含有this指针的公有成员)访问
共有:含this指针的
静态:类名..静态成员名=...;
function classname(){
var privateproperty="私有成员";
function privatemethod(){
  alert(privateproperty);
}
this.pubproperty=privateproperty;
this.method1=funtion(){
  privateproperty="公有成员修改私有成员";
}
this.method2=funtion(){
  privatemethod(); //共有成员调用私有成员方法
}
}
var instance = new classname();
instance.method1();  //调用共有方法method1
instance.method2();  //调用共有方法method2

classname.staticProperty="sample";//静态成员
---------------------------------------------------------------------------------------
4:类实现机制:
function classname(){
var privateproperty="私有成员";
function privatemethod(){
  alert(privateproperty);
}
this.pubproperty=privateproperty;
this.method1=funtion(){
  privateproperty="公有成员修改私有成员";
}
this.method2=funtion(){
  privatemethod(); //共有成员调用私有成员方法
}
}
var instance = new classname();
new 的过程:
a.遇见new就创建一个空对象
b.运行classname这个函数,this指针指向这个对象
c.给对象不存在的属性赋值时,则创建这个属性,如:this.pubproperty=privateproperty;自动添加pubproperty属性,并赋值.函数执行起到初始化的功能.
d.函数执行完以后,new返回初始化的对象.
---------------------------------------------------------------------------------------
5.实现反射机制for(...in...)
语法:
for(var p in obj){
//语句
}
p是 obj属性(方法)名称的变量声明
例子:使用反射传递样式参数
目标:修改style背影色
element.style.background="#ff0000";
style对象可以有很多属性,例子:
var style={
color:#ffffff,
background:#ff0000,
borderWith:2px
}
实现1:
function setStyle(_style){
var element=getElement();
element.style=_style;
}
现在要修改背影色,假设传入的_style是这个样子:
var _style={
background:#ff0000
}
则style的color:#ffffff,borderWith:2px的属性将丢失。
解决办法:遍历修改style
function setStyle(_style){
var element=getElement();
for(var p in _style){
  element.style[p]=_style[p];
}
}
---------------------------------------------------------------------------------------
6:类继承:拷贝一个类的prototype到另外一个类以实现继承
a.共享prototype实现继承
function class1(){
//构造函数
}
function class2(){
//构造函数
}
class2.prototype=class1.prototype; //此时class1和class2死等价的
class2.prototype.moreProperty="xxx"; //class2额外加了一个属性,其实class1也增加了这个属性的
class2.prototype.moreMethod=function(){ //class2额外加了一个方法,其实class1也增加了这个方法的
//方法实现代码
};

var obj=new class2();

obj instanceof class1 //成立
obj instanceof class2 //成立

可见class1和class2是完全相同的,是对同一个对象的引用,他们的属性方法都是一样的,只是构造函数不同而已.

b.利用反射机制和prototype实现继承
function class1(){
//构造函数
}

class1.prototype={
method1:function(){
alert(method1);
},
method2:function(){
alert(method2);
}
}

function class2(){
//构造函数
}

//让class2继承于class1
for(var p in class1.prototype){
class2.protptype[p]=class1.prototype[p];
}

//覆盖定义在class1中的method方法
class2.prototype.method1=function(){
alert(2);
}

var obj1= new class1();
var obj2= new class2();

obj1.method1();//method1
obj2.method1();//2

obj1.method2();//method2
obj2.method2();//method2

obj2中重复定义的method1覆盖了继承的method1，而method2不变.obj1中的method1和method2都不变.
目前为止，才实现了真正意义的类继承。

例子:为所有的函数对象(类)的共同类添加继承方法,使所有的类都有一个inherit方法.
Function.prototype.inherit=function(baseClass){
for(var p in baseClass.prototype){
this.prototype[p]=base.prototype[p];
}
}
---------------------------------------------------------------------------------------
7:prototype框架的类继承实现机制
a.为每个对象都定义一个extend方法:
object.extend=function(destination,source){
for(var p in source){
destination[property]=source[property];
}
return destination;
}
b.通过object类为每个对象添加方法extend
object.prototype.extend=function(object){
return object.extend.apply(this,[this,object]);
}

例子:

//定义extend方法
Object.extend = function(destination, source) {
for (property in source) {
    destination[property] = source[property];
}
return destination;
}
Object.prototype.extend = function(object) {
return Object.extend.apply(this, [this, object]);
}
//定义class1
function class1(){
//
}
//定义class1的成员
class1.prototype={
method1:function(){
    alert("class1");
},
method2:function(){
    alert("method2");
}
}
//定义class2
function class2(){
//构造函数
}
//让class2继承class1并定义新成员
class2.prototype=(ne class1()).extend({
method1:function(){
    alert("class2");
}
});

//创建两个实例
var obj1=new class1();
var obj2=new class2();

obj1.method1(); //class1
obj2.method1(); //class2
obj1.method2(); //method2
obj2.method2(); //method2
---------------------------------------------------------------------------------------
8:事件设计模式
a.最简单的事件设计模式
function class1(){
//构造函数
}
class1.prototype={
show:function(){
//show函数的实现
this.onShow(); //触发show事件
},
onShow:function(){} /
}

//创建class1类实例
var obj=new class1();
//创建obj的onshow事件
obj.onShow=function(){
alert("onshow event");
}
//调用obj的show方法
obj.show();

b.给事件处理程序传参

//定义class1
function class1(){
//构造函数
}
class1.prototype={
show:function(){
    //show函数实现
    this.onShow();   //出发onShow事件
},
onShow:function(){} //定义事件接口
}
//创建class1实例
var obj=new class1();
//创建obj的onShow事件处理函数
function objOnShow(userName){
alert("hello,"+userName);
}
//定义变量userName
var userName="jack";
//绑定obj的onShow事件
obj.onShow=objOnShow;   //无法将userName这个变量传递进去
//调用obj的show方法
obj.show();

obj.onShow=objOnShow而应改成:
obj.onShow=objOnShow(userName);//将objOnShow(userName)的结果赋值给obj.onShow
obj.onShow="objOnShow(userName)";//后者是将字符串"objOnShow(userName)"赋值给obj.onShow

解决办法:构建一个无需参数的事件处理程序
//所有参数的函数封装为无参数函数
function createFunction(obj,strFunc){
var args=[]; // 定义args用于存储传递给事件处理程序的参数
if(!obj)obj=window; //如果是全局函数,则obj=window;
//得到传递给事件处理程序的参数
for(var i=2;i<arguments.length;i++)args.push(arguments[i]);
//用无参数函数封装事件处理程序的调用
return function(){
obj[strFunc].apply(obj,args); //将参数传递给指定的事件处理程序
}
}
obj为包含事件处理程序的对象,strFunc为事件处理程序的名称
其中:args为事件处理程序strFunc的形参,使用arguments对象处理.

例子:
someObject.eventHandler=function(_arg1,_arg2){
//事件处理代码
}
则可以调用:
createFunction(someObject,"eventHandler",arg1,arg2);
这样就返回了一个无参数的函数,返回的函数中已经包含了传递进来的参数.
如果是全局函数,它实际上是window对象的一个方法,所以传递window对象作为obj参数,
若obj为null，createFunction给obj指定为window对象.

应用:
//将有参数的函数封装为无参数的函数
function createFunction(obj,strFunc){
var args=[];
if(!obj)obj=window;
for(var i=2;i<arguments.length;i++)args.push(arguments[i]);
return function(){
    obj[strFunc].apply(obj,args);
}
}
//定义类class1
function class1(){
//构造函数
}
class1.prototype={
show:function(){
    //show函数实现
    this.onShow();   //触犯onShow事件
},
    onShow:function(){} //定义事件接口
}
//创建class1实例
var obj=new class1();
//创建obj的onShow事件处理程序
function objOnShow(userName){
alert("hello,"+userName);
}
//定义变量userName
var userName="jack";
//绑定obj的onShow事件
obj.onShow=createFunction(null,"objOnShow",userName);
//调用obj的show方法
obj.show();

实际上obj.onShow得到的事件处理程序并不是objOnShow,而是由createFunction返回的一个无参函数.
---------------------------------------------------------------------------------------
9:使用定义事件支持多绑定
使用attachEvent或addEventListener方法实现多个事件处理程序同时绑定.
而自定义事件怎样实现多订阅?
需要一个机制用于存储绑定的多个事件处理程序,在事件发生时同时调用这些事件处理程序.
//定义类class1
function class1(){
//构造函数
}
//定义类成员
class1.prototype={
show:function(){
    //show的代码
    //...

    //如果有事件绑定则循环onshow数组,触发该事件
    if(this.onshow){
      for(var i=0;i<this.onshow.length;i++){
        this.onshow[i](); //调用事件处理程序
      }
    }
},
attachOnShow:function(_eHandler){
    if(!this.onshow)this.οnshοw=[]; //用数组存储绑定的事件处理程序引用
    this.onshow.push(_eHandler);
      }
}
var obj=new class1();
//事件处理程序1
function onShow1(){
alert(1);
}
//事件处理程序2
function onShow2(){
alert(2);
}
//绑定两个事件处理程序
obj.attachOnShow(onShow1);
obj.attachOnShow(onShow2);
//调用show,触发onshow事件
obj.show();
=======================================================================================
五:DOM
1.结点的概念:文档是由层次不同的多个结点组成.
---------------------------------------------------------------------------------------
2:结点的类型:
<label for="checkbox1">label1</lable>
a.元素结点:label
b.属性结点:for="checkbox1"
c.文本结点:label1
每个闭合的标记是一个结点,而闭合中的文本和闭合内的属性也是一个结点.
---------------------------------------------------------------------------------------
3:引用结点:
直接引用:document.getElementById()
   document.getElementByTagName()
间接引用:
  a.引用子结点:每个结点都有一个childNodes集合,例如:document.childNodes[0].childNodes[1];
  b.引用父结点:每个结点都仅有一个父结点,element.parentNode;
  c.引用兄弟结点: 引入上一个兄弟结点.element.nextSibling
    引入下一个兄弟结点.element.previousSilbling
---------------------------------------------------------------------------------------
4:获得结点的信息
假设已经获得了一个结点的引用Node
a.获得结点名称:使用nodeName属性,Node.nodeName
<span id="spanid">123</span>
元素结点:返回标记名 span
属性结点:返回属性名 id
文本结点:返回文本内容 1234
b.获得结点类型:使用nodeType属性,Node.nodeType
元素结点:返回 1
属性结点:返回 2
文本结点:返回 3
c.获得结点的值:使用nodeValue属性,Node.nodeValue
元素结点:返回 null
属性结点:返回 undifined
文本结点:返回文本内容
d.判断结点是否有子结点:使用hasChildNodes方法,hasChildNodes
e.获得元素结点的标记名称:使用tagName属性,属元素结点独占属性
---------------------------------------------------------------------------------------
5:处理属性结点
a.获取和设置属性结点的值
每个属性结点都是一个元素结点的一个属性,访问形式:元素结点.属性结点
<img id="imgDemo" src="hello.jpg" alt="demo">
document.getElementById("imgDemo").src="new.jpg";
b.setAttribute()添加属性,原型:elementNode.setAttribute(attributeName,attributeValue);
b.getAttribute()获取属性,原型:elementNode.getAttribute(attributeName);
---------------------------------------------------------------------------------------
6:处理文本结点
a.使用interHTML
<span id="spanid">123</span>
document.getElementById("spanid").interHTML="new enty";
b.使用结点处理方法
document.getElementById("spanid").childNodes[0].nodeValue;
---------------------------------------------------------------------------------------
7:改变文档的层次结构
a.创建元素结点:document.createElement(elementName);
  例子:document.createElement("div");
b.创建文本结点:document.createTextNode(text);创建的是文本结点的文本值(纯文本,不需要转意)
  例子:document.createTextNode("<hello>");
a.添加结点:parentElement.appendChild(childElement)方法;
  例子:var div1=document.createElement("div");
              var tn1=document.createtextNode("文本的内容");
       div1.appendChild(tn1);
---------------------------------------------------------------------------------------
8:使用insertBefore方法插入子结点
appendChild只能将结点添加到所有结点的后面!insertBefore可以将结点插到指定结点的前面.
原型:parentNode.insertBefore(newNode,referenceNode);该方法返回一个新结点的引用.
---------------------------------------------------------------------------------------
9:使用replaceChild方法取代子结点
parentNode.replaceChild(newNode,oldNode);
---------------------------------------------------------------------------------------
10:使用cloneNode方法复制结点
node.cloneNode(includeChildren); includeChildren是bool型,表示是否复制子结点.
---------------------------------------------------------------------------------------
11:使用removeChild方法删除子结点
parentNode.removeChild(childNode);
---------------------------------------------------------------------------------------
12:DOM1(DHTML)中表格对象的结构
表格就是一个表格对象,由表格行对象组成,表格行对象由单元格对象组成.
a.创建一个表格对象
  var _table=document.createElement("table");
b.添加一行:insertRow
   table.insertRow(index);
  新建的一行没有任何单元格,只有添加了单元格才会显示
c.添加单元格:insertCell
  tableRow.insertCell(index);
d.引用单元格:
  table.rows[i].cells[j];
e.使用单元格对象:
  var cb=document.createElement("input");
  cd.type="checkbox";
  _table.rows[0].cells[0].applyChild(cb);
f.删除行和单元格
  table.deleteRow(index);
  table.deleteCell(index);
=======================================================================================
六:css
1:选择器:
a.标记选择器 tageName {}
b.类型选择器 tagename.className {}
c.id选择器 tagname#idName {}
d.层次选择器层次选择器由多个子选择器组成,他们只见彼此用空格隔开,最前面的表示最顶层的条件.
  例子:div#div1 ul li {font_weight:bold;}
  <div id="div1">
   <ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
   </ul>
  </div>
---------------------------------------------------------------------------------------
2:使用javascript控制CSS:element.style
a.单个单词使用不变的属性名称;如border
b.多单词的属性改成骆驼型写法:如CSS中的font-size,而javascript中的fontSize.

HTML标记和style中的一些属性是类似的:
element.bgColor  //使用HTML标记的属性
element.style.backgroundColor //使用CSS来控制
---------------------------------------------------------------------------------------
3:使用className指定结点样式
document.getElementById('...').className=stylename;
---------------------------------------------------------------------------------------
4:CSS虑镜filter
A.界面虑镜
  a.AlphfImageLoader虑镜
   在容器的文本和背影之间插入一张图片,并对该图片进行控制
  b.Gradient虑镜
   在容器的内容和背影之间增加一层颜色渐变效果,与使用渐变图片作为背影实现的效果类似.
B.静态虑镜
  a.Alpha虑镜
   调整对象内容的透明度.
  b.DropShadow虑镜
   给指定对象设置阴影效果.
  c.shadow虑镜
   给指定对象设置阴影效果,并且渐变.
  d.glow虑镜
   使对象的内容呈发光效果.
C.动态虑镜
  a.BlendTrans虑镜
   以渐隐渐显的效果实现容器内容的切换.
  b.RevealTrans虑镜
   提供很多切换的效果
</javascript>

wv112406

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象javascript

面向对象javascript &lt;script language="javascript"&gt;一:函数的类型对应的是Function,new返回的结果是函数对象function函数对象(Function)和Object,Array,Date,Math一样都是内部对象，实际上是代表着一种类型,函数对象对应的类型是Function,正如数组...
复制链接

扫一扫

专栏目录