• JavaScript:prototype属性使用方法


    原文:https://www.cnblogs.com/lidabo/archive/2012/01/05/2313481.html

    https://www.cnblogs.com/wdlhao/p/5743770.html

    prototype就是“一个给类的对象添加方法的方法”,使用prototype属性,可以给类动态地添加方法,以便在JavaScript中实现“继承”的效果。

          具体来说,prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,当你用prototype编写一个类后,如果new一个新的对象,浏览器会自动把prototype中的内容替你附加在对象上。这样,通过利用prototype就可以在JavaScript中实现成员函数的定义,甚至是“继承”的效果。

    当用构造函数创建一个新的对象时,新的对象会获取构造函数的prototype属性所指向的prototype对象的所有属性和方法,这样一来,构造函数对应的prototype对象所做的任何操作都会反映到它所生成的对象上,所有的这些对象将共享与构造函数对应的prototype对象的属性和方法。

    简而言之,就是如果我们使用函数的prototype对象来给函数添加方法,那么在创建一个新的对象的时候,并不会复制这个函数的所有方法,而是指向了这函数的所有方法。

    function MyClass(name,age){
        this.name = name;
        this.age = age;
    }
    MyClass.prototype.toString = function(){
        //
    }
    
    var cls1 = new MyClass("liming",10);
    cls1.toString(); //
    
    var cls2 = new MyClass("zhang",10);
    cls2.toString();
    function MyClass(name,age){
        this.name = name;
        this.age = age;
    }
    MyClass.prototype = {
        toString:function(){
            //
        },
        sayHellow:function(){
            //
        }
    };

    javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。(父类的引用)

    每一个构造函数都有一个属性叫做原型。这个属性非常有用:为一个特定类声明通用的变量或者函数。

    你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在。你可以看看下面的例子:

    function Test(){}
    alert(Test.prototype); // 输出 "Object"

    原型法设计模式:(相当于java中的类,B是对象)

    原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

    javascript的方法分为三种:

    1.类方法(java中的静态方法)    2.对象方法 (普通方法,需要先new一个对象)  3.原型方法(类上加普通方法,动态)

    function People(name)
    {
      this.name=name;
      //对象方法
      this.Introduce=function(){
        alert("My name is "+this.name);
      }
    }
    //类方法
    People.Run=function(){
      alert("I can run");
    }
    //原型方法
    People.prototype.IntroduceChinese=function(){
      alert("我的名字是"+this.name);
    }
     
    //测试
    var p1=new People("Windking");
    p1.Introduce();
    People.Run();
    p1.IntroduceChinese();

    给prototype添加属性:

    function Fish(name, color){
       this.name=name;
       this.color=color;
    }
    Fish.prototype.livesIn="water";
    Fish.prototype.price=20;
    
    var fish1=new Fish("mackarel", "gray");
    var fish2=new Fish("goldfish", "orange");
    var fish3=new Fish("salmon", "white");
    for (int i=1; i<=3; i++){
       alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
    }

    你看到所有的鱼都有属性livesIn和price,我们甚至都没有为每一条不同的鱼特别声明这些属性。这时因为当一个对象被创建时,这个构造函数 将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性

    用prototype给对象添加函数:

    function Employee(name, salary){
        this.name=name;               
        this.salary=salary;
    }
    Employee.prototype.getSalary=function getSalaryFunction(){
        return this.salary;
    }
    Employee.prototype.addSalary=function addSalaryFunction(addition){
        this.salary=this.salary+addition;
    }
    var boss1=new Employee("Joan", 200000);
    var boss2=new Employee("Kim", 100000);
    var boss3=new Employee("Sam", 150000);
    
    
    alert(boss1.getSalary());   // 输出 200000
    alert(boss2.getSalary());   // 输出 100000
    alert(boss3.getSalary());   // 输出 150000

    理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

  • 相关阅读:
    二分查找算法
    java多线程模拟停车位问题
    ECShop模板原理
    linux 常用命令 自己 积累
    ubuntu忘记root密码解决
    centos下一键安装lamp环境,快捷,方便
    腾讯php部分面试题答案
    PHP面试题集
    php笔试题
    流行的php面试题及答案
  • 原文地址:https://www.cnblogs.com/zyzg/p/7856199.html
Copyright © 2020-2023  润新知