JavaScript扩展类库和框架作用 js扩展属性

JavaScript 是一种基于原型的面向对象语言

在 javaScript 中，每个对象都有一个它的原型（prototype）对象的引用，这个原型对象又有自己的原型，直到某个对象的原型为 null 为止，这种一级一级的链结构就称为原型链（prototype chain）。比如

定义一个object对象var o={},它的原型为Object.prototype，而Object.prototype的原型为null

 下面为示例代码

 

<script type="text/javascript">
            var o={name:"aa"};
       function findPrototype(o) {              
                if(o!=null){  
                   var a=  Object.getPrototypeOf(o);
                    console.info(a);
                    arguments.callee(a);
                }
       }
       var a=function(){};
       findPrototype(o);
       findPrototype(a);
    </script>

 

证明一下每个对象都有一个它的原型（prototype）对象的引用，下面是一段演示的代码 

function  myDialog (id,title) {
       this.title=title||"标题";
       this.id=id;
      this.show=function(){
          console.info("窗体标题是："+this.title);
        }
    }
 //在myDialog 的原型上扩展一个move方法
  myDialog.prototype.move=function(){
          console.info("可以拖拽移动");
     }
 
 //创建两个对象
 
var d1=new myDialog("#win");
 var  d2=new myDialog("#win");
 //分别输出对象上的show函数，原型上的move是否相同，如果都相同，可以说对象没有它的原型（prototype）对象的引用，如果不同则说明每个对象都有一个它的原型（prototype）对象的引用
 
console.info(d1.show==d2.show);
 
console.info(d1.move==d2.move);
//输出结果为

 

说明每个对象都有一个它的原型（prototype）对象的引用

 

js属性扩展：

 一般分为两种，一种是静态属性，一种是实例属性（非静态属性）

<script type="text/javascript">
    function  myDialog (id,title) {
       this.title=title||"标题";
       this.id=id;
      this.show=function(){
          console.info("窗体标题是："+this.title);
        }
    }
// 扩展静态属性，在方法上直接扩展myDialog，访问时直接方法.属性的方式访问，如myDialog.defaults.shade
   myDialog.defaults={
        resize:false,
        shade:true,
   }
//扩展静态方法，访问方式如Math.abs()的方式相同 
   myDialog.help=function(name){
      console.info("查询"+name+"用法");
   }
//实例属性，通过new之后访问 
    myDialog.prototype={
      constructor:new myDialog,//将constructor修改回myDialog
    
       open:function(){
               console.info("打开")
        },
        close:function(){ 
           console.info("关闭了");
        }
    }
    
     myDialog.prototype.move=function(){
          console.info("可以拖拽移动");
     }
     var d=new myDialog("#win","标题信息");
     console.info(d);
    </script>

 

 

继承基本上可以分为下面4种

1，基于原型链的继承

 

function  myDialog (title) {
       this.title=title||"标题";
      
    }
   
   function alert(title,msg){
        this.base=myDialog;
 
        this.base(title);
        this.msg=msg;
   }
   alert.prototype=new myDialog;
   var a=new alert("标题1111","alert弹出框");
   console.info(a);

 

2，拷贝继承

 

   

function  myDialog (options) {
      var copy=this;

将传入的参数转化为myDialog的属性

copy[key]=options[key];
         }
        delete copy;
    }
    myDialog.prototype.type="对话框";
    var d=new myDialog({title:"标题",content:"aaaa",shade:true});
    console.info(d);
   
   function alert(msg){
        
        this.msg=msg;
   }
//只能拷贝原型上的属性myDialog.prototype
 for(var key in myDialog.prototype){
      alert.prototype[key]=myDialog.prototype[key];
 }
   var a=new alert("alert弹出框");
   console.info(a);

 

3，ECMAScript 5继承方式

 

function  myDialog (title) {
      this.title=title;
    }
   myDialog.prototype.type='弹出框';
   function alert(msg){
        
        this.msg=msg;
   }
alert.prototype = Object.create(myDialog.prototype);
   var a=new alert("alert弹出框");
   console.info(a);
   console.info(a instanceof myDialog );

 

4，使用call() / apply() 方法实现继承

function  myDialog (title) {
 
      this.title=title||"标题";
    }
   
   function alert(title,msg){
        myDialog.call(this,title);
        this.msg=msg;
   }
   var a=new alert("标题11111","alert弹出框");
   console.info(a);

 使用 javascript 的 call() 方法相对明了一些

 

属性查找

在访问一个对象的属性时，JavaScript 将执行下面的步骤：

检查本地值是否存在。如果存在，返回该值。

如果本地值不存在，检查原型链（通过 __proto__ 属性）。

如果原型链中的某个对象具有指定属性的值，则返回该值。

如果这样的属性不存在，则对象没有该属性。