zoukankan      html  css  js  c++  java
  • javascript 函数属性prototype(转)

    JavaScript中并没有类的概念,但javascript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。

    1、prototype 
    在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。

    2、简单的例子 

    复制代码 代码如下:

    [javascript] view plain copy
     
    1. var Blog = function( name, url ){  
    2. this.name = name;  
    3. this.url = url;  
    4. };  
    5. Blog.prototype.jumpurl = '';  
    6. Blog.prototype.jump = function(){  
    7. window.location = this.jumpurl;  
    8. };  
    9. /* 
    10. *等同于 
    11. Blog.prototype = { 
    12. jumpurl : '', 
    13. jump : function(){ 
    14. window.location = this.jumpurl; 
    15. }; 
    16. */  
    17. var rainman = new Blog('jb51', 'http://www.jb51.net');  
    18. var test = new Blog('server', 'http://s.jb51.net');   



    这是一个非常简单的例子,但却可以很好的解释prototype内在的一些东西,先看下图的内存分配: 

    通过上图可以看到下面这些内容: 

    prototype只是函数的一个属性,该属性的类型是一个对象。 
    内存分配状况: 
    函数Blog拥有一个prototype属性,而prototype属性拥有一个变量和一个函数; 
    test和rainman两个变量都分别有name和url两个变量; 
    test和rainman两个变量都有一个jumpUrl变量和一个jump函数,但是并没有分配内存,它们是对Blog.protype中的引用 

    3、扩展1: 

    复制代码 代码如下:

    [javascript] view plain copy
     
    1. Website.prototype = Blog.prototype  
    2. var Blog = function( name, url ){  
    3. this.name = name;  
    4. this.url = blogurl;  
    5. };  
    6. Blog.prototype.jumpurl = '';  
    7. Blog.prototype.jump = function(){  
    8. window.location = this.jumpurl;  
    9. };  
    10. var rainman = new Blog('jb51', 'http://www.jb51.net');  
    11. var test = new Blog('server', 'http://s.jb51.net');  
    12.   
    13. var Website = function(){};  
    14. Website.prototype = Blog.prototype;  
    15. var mysite = new Website();   




    通过上图可以看到下面这些内容: 

    "Website.prototype = Blog.prototype;":Website的prototype并没有分配内存,只是引用了Blog的prototype属性。
    mysite的两个属性也没有分配内存,也只是分别引用了Blog.prototype.jumpurl和Blog.prototype.jump 


    4、扩展2: 

    复制代码 代码如下:

    [javascript] view plain copy
     
    1. Website.prototype = new Blog()  
    2. var Blog = function(){};  
    3. Blog.prototype.jumpurl = '';  
    4. Blog.prototype.jump = function(){  
    5. window.location = this.jumpurl;  
    6. };  
    7.   
    8. var Website = function(){};  
    9. Website.prototype = new Blog();  
    10. var mysite = new Website();   




    通过上图可以看到下面这些内容: 

    Website的prototype属性,只是Blog的一个实例( 同rainman=new Blog(); );因此Website的prototype属性就具有了jumpurl变量和jump方法了。
    mysite是Website的一个实例,它的jumpurl和jump方法是继承自Website的prototype,而Web.prototype继承自Blog.prototype(这里与其说是继承,不如说是引用)
    整段程序在运行的过程中,内存中只分配了一个jumpurl变量和一个jump方法 
    5、new运算符 
    JavaScript中new运算符。 
    JavaScript中new运算符是创建一个新对象。使用方法: 
    new constructor[(arguments)] 
    其中constructor是必选项。对象的构造函数。如果构造函数没有参数,则可以省略圆括号。 
    arguments是可选项。任意传递给新对象构造函数的参数。 

    JavaScript中new运算符说明 
    new 运算符执行下面的任务: 
    创建一个没有成员的对象。 
    为那个对象调用构造函数,传递一个指针给新创建的对象作为 this 指针。 
    然后构造函数根据传递给它的参数初始化该对象。 
    示例 
    下面这些是有效的 new 运算符的用法例子。 
    my_object = new Object; 
    my_array = new Array(); 
    my_date = new Date("Jan 5 1996");

    6、其它 

    在绝大多数JavaScript版本中,js引擎都会给每个函数一个空的原型对象,即prototype属性。

  • 相关阅读:
    npmcnpmyarn yarn 关于源和代理的问题
    react : umi 引入 antd 踩坑
    Ant Design Pro 学习笔记:数据流向
    dva + umi 学习笔记
    简单分析 ztree 源码
    X-Tag实战:给博客加一个隐藏侧栏的功能
    javascript中var,let,const的区别
    linq 延迟执行带来的困扰
    如何实现能像windows 窗体一样改变大小的控件 Silverlight
    一个循环递归遍历问题
  • 原文地址:https://www.cnblogs.com/keyi/p/7110338.html
Copyright © 2011-2022 走看看