Js中的prototype

简介:    最近新入职了一家公司,周五看代码的时候,发现他们页面上的js是这样纸的,我当时的心情是莫名其妙的:好吧,入乡随俗。prototype通俗的用法,就是向对象添加属性跟方法。/* javascript中的每个对象都有prototype属性,js中对象的prototype属性的解释是,返回对象类型原型的引用。


   最近新入职了一家公司,周五看代码的时候,发现他们页面上的js是这样纸的,我当时的心情是莫名其妙的:




好吧,入乡随俗。


prototype通俗的用法,就是向对象添加属性跟方法。


/*
  javascript中的每个对象都有prototype属性,js中对象的prototype属性的解释是,返回对象类型原型的引用。
  A.prototype=new B();
  理解prototype不应把它和继承混淆。
  这里强调的是克隆而不是继承。


 */
function People(name){
  this.name=name;
  //对象方法
  this.Introduce=function(){
    alert("my name is "+this.name);
  }
}

//类方法
People.Run=function(){
  alert("i am running...");
}

//原型方法
People.prototype.IntroduceChinese=function(){
  alert("我的名字是:"+this.name);
}

//测试
var p1=new People("lhc");
p1.Introduce();
People.Run();
p1.IntroduceChinese();

通过prototype,起到了一个克隆方法的作用。


下面来瞅瞅使用原型的时候,可能会遇到的问题。


问题一:扩展类与对象实例具有相同的方法,调用时候会调用哪一个?



function baseClass(){
  this.showMsg=function(){
    alert("baseClass:showMsg");
  }
}

function extendClass(){
  this.showMsg=function(){
    alert("extendClass::showMsg");
  }
}

extendClass.prototype=new baseClass();
var instance=new extendClass();
instance.showMsg();//extendClass::showMsg

结论: 函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。






目录
相关文章
|
6月前
|
前端开发 JavaScript
【JavaScript原型链prototype详解】
在JavaScript中,每个对象都有一个原型(prototype)属性,它指向另一个对象。这个被指向的对象也有自己的原型,以此类推,最终形成了一个原型链。原型链的顶端是Object.prototype,它是所有对象的根原型。 当我们访问一个对象的属性时,如果该对象自身没有这个属性,JavaScript会沿着原型链向上查找,直到找到匹配的属性或者到达原型链的末端。
86 0
【JavaScript原型链prototype详解】
|
6月前
|
JavaScript 前端开发
CocosCreator 面试题(二)JavaScript中的prototype的理解
CocosCreator 面试题(二)JavaScript中的prototype的理解
152 0
|
1月前
|
JavaScript
JS原型对象prototype
JS原型对象prototype
|
4月前
|
JavaScript 前端开发
JavaScript基础知识:什么是原型链(Prototype Chain)?
JavaScript基础知识:什么是原型链(Prototype Chain)?
32 2
|
4月前
|
JavaScript 前端开发 Java
JavaScript难点:原型、原型链、继承、new、prototype和constructor
JavaScript 不像 Java、C++ 这种纯面向对象的语言,可以通过类实现继承,JavaScript中的继承是通过原型实现的,即使 ES6 中新增的 class 类也只是原型的语法糖而已
48 4
|
12月前
|
自然语言处理 JavaScript 前端开发
JavaScript:深入理解原型语言,洞察__proto__与prototype之间的区别
JavaScript:深入理解原型语言,洞察__proto__与prototype之间的区别
214 0
|
Web App开发 JavaScript 前端开发
原型(prototype) 和 原型链(__proto__) —— 别再为 JavaScript 的原型苦恼了
原型(prototype) 和 原型链(__proto__) —— 别再为 JavaScript 的原型苦恼了
79 0
|
JavaScript
JS中的prototype、__proto__与constructor
JS中的prototype、__proto__与constructor
44 0
JS中的prototype、__proto__与constructor
|
JavaScript 前端开发
JavaScript prototype(原型)
JavaScript prototype(原型)
68 0
JavaScript prototype(原型)
|
JavaScript
JS中的prototype、__proto__与constructor
JS中的prototype、__proto__与constructor
JS中的prototype、__proto__与constructor