zoukankan      html  css  js  c++  java
  • javascript中原型(prototype)与原型链

    javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有class保留字,但不能用作变量名

    原型:Javascript中的每一个对象都有一个内部私有的连接指向另一个对象,这个对象就是原对象的原型  注意:原型是一个对象,其他对象可以通过他实现属性继承

    原型链:这个原型对象也有自己的原型,直到对象的原型为null为止(也就是没有原型),这种一级一级的链结构就称为原型链

    javascript中对象:在javascript中,一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined,null,boolean,number,string),那它就是一个对象

    在这里一旦当某个对象的原型所引用的对象的属性被定义,就可以被多个引用它的实例所继承,即这些实例对象的原型所指向的就是这个原型对象。

    基于原型链的继承:

    继承属性:

      javascript对象有两种不同的属性来源,一个是对象自身属性,另一是继承于原型链上的属性

    例:

    //假设有一个对象obj={a:1,b:2},并且obj所在的原型链如下:
    
    //{a:1,b:2} ---> {b:3,c:4} ---> null
    
    //a,b是obj自身的属性
    
    //本例中,用“对象.[[Prototype]]”来表示这个对象的原型
    
    alert(obj.a);
    
    //输出1  证明a是obj自身的属性
    
    alert(obj.b);
    
    //输出2  证明b是obj自身的属性
    
    //在obj.[[Prototype]]中还有一个‘b’属性,但它不会被访问到。这种情况称为“属性遮蔽”。
    
    alert(obj.c);
    
    //输出4  c不是obj自身的属性,但是obj.[[prototype]]的属性
    
    alert(obj.d);
    
    //输出undefined  d既不是obj自身的属性,也不是obj.[[prototype]]的属性
    
    //也不是obj.[[prototype]].[[prototype]](即null)的属性,原型链已到顶端,没有d属性,返回undefined
    View Code

    继承函数:

      javascript中任何函数都可以添加到对象上作为对象的属性。继承函数与继承属性基本没差别,包括“属性遮蔽”(相当于其他语言中的方法重写)  注意:当继承的函数被调用时,this指向的是继承的对象,而不是函数被声明的原型对象

    例:

    var obj={
    
      a:2,
    
      m:function(b){
    
        return this.a+1;
    
      }
    
    };
    
    alert(obj.m());  //输出3,当调用obj.m时,‘this’指向了obj
    
    var p=Object.create(obj);  //p是一个对象,p.[[Prototype]]是obj
    
    p.a=12;  //创建p的自身属性a
    
    alert(p.m());  //输出13,当调用p.m时,‘this’指向了p,‘this.a’则是12
    View Code


    创建对象和生成原型链的不同方法:

    使用普通方法创建对象:

    例:

    var obj={a:1};
    
    //obj这个对象继承了Object.prototype上面的所有属性,所以可以使用obj.hasOwnProperty('a')
    
    //hasOwnProperty是Object.prototype的自身属性,而Object.prototype的原型为null,如下:
    
    //obj ---> Object.prototype ---> null
    
    
    var a=["one","two","three"];
    
    //数组都继承于Array.prototype,继承者继承其一些方法,如:indexOf,forEach,原型链如下:
    
    //a ---> Array.prototype ---> Object.prototype --->null 
    
    
    function F(){
    
      return 2;
    
    }
    
    //函数都继承于Function.prototype,继承者继承其一些方法,如:call,bind,原型链如下:
    
    //F ---> Function.prototype ---> Object.prototype --->null 
    View Code

    使用构造函数创建对象:

      javascript中,构造方法其实就是一个普通的函数。当时用new操作符来作用这个函数时,它就可以被称为构造函数

    例:

    function Graph(){
    
      this.vertexes=[];
    
      this.edges=[];
    
    }
    
    Graph.prototype={
    
      addVertex:function(v){
    
        this.vertexes.push(v);
    
      }
    
    };
    
    var g=new Graph();
    
    //g是生成的对象,他的自身属性有‘vertexes’和‘edges’
    
    //g被实例化时,g.[[Prototype]]指向了Graph.prototype
    View Code

    使用Object.create创建对象:
      ECMAScript 5 中引入了一个新的方法:Object.create 。可以调用这个方法来创建一个新对象。新对象的原型就是调用create方法时传入的第一个参数:

    例:

    var a={a:1};
    
    //a ---> Object.prototype ---> null
    
    
    var b=Object.create(a);
    
    //b ---> a ---> Object.prototype ---> null
    
    alert(b.a);
    
    //输出1 (继承而来)
    
    
    var c=Object.create(b);
    
    //c ---> b ---> a ---> Object.prototype ---> null
    
    
    var d=Object.create(null);
    
    //d ---> null
    
    alert(d.hasOwnProperty);
    
    //输出undefined,因为d没有继承Object.prototype
    View Code

    性能:

      在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。

      遍历对象的属性时,原型链上的每个属性都是可枚举的。

      检测对象的属性是定义在自身上还是在原型链上,有必要使用 hasOwnProperty 方法,该方法由所有对象继承自 Object.proptotype

      hasOwnProperty 是 JavaScript 中唯一一个只涉及对象自身属性而不会遍历原型链的方法

    相关文章:

      Angus Croll:JavaScript,JavaScript...

       @三月沙 :理解JavaScript原型

      

      Tranch(from MDN):继承于原型链

    更多知识分享:微笑空间站

  • 相关阅读:
    区块链
    黑帽内容整理
    编程语言
    编程语言
    PHP
    安全体系建设-OWASP
    burp
    编程语言-Python-GUI
    加解密
    结合自己的程序对thinkphp模板常量的理解
  • 原文地址:https://www.cnblogs.com/xuyongsky1234/p/4168438.html
Copyright © 2011-2022 走看看