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的实例。

posted @ 2017-11-18 11:10 zmoony 阅读(222) 评论(0) 编辑收藏举报

刷新页面返回顶部

zmoony

JavaScript：prototype属性使用方法

公告