js中的原型

Posted 雪昀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的原型相关的知识,希望对你有一定的参考价值。

一、在js中的构造函数与原型

      js中没有类的概念,只是把一个对象实例化,这个对象一般会成为原型对象。js中所以的函数都有一个prototype属性,这个属性引用了一个对象, 即原型对象,也简称原型。这个函数包括构造函数和普通函数。

      

   function A(X) {
        this.x=x;
   }

  var obj = new A(1);

  alert( A.x)// 1

   这其中最重要的是要有this 这个属性,实例化以后才能直接用。new  以后this  指向的是新对象。

   实例化  object  对象有三步:

     1、创建obj对象:obj= new Object();

     2、将obj 的内部_proto_指向构造他的函数A的prototype。实例化的对象内部没有prototype,他是通过_proto_来取得原型链上的原型属性与原型方法。

    obj.constructor === A.prototype.constructor ,类的实例对象的constructor属性永远指向"构造函数"的prototype.constructor),从而使得obj.constructor.prototype指向A.prototype

     3. 将obj作为this去调用构造函数A,从而设置成员(即对象属性和对象方法)并初始化。

var num=0;
for(o in A.prototype) {
  alert(o);//alert出原型属性名字
  num++;
}
alert("member: " + num);//alert出原型所有成员个数。

 

   二、原型与继承

      原型继承:

   

function A(x){
   this.x = x;
 }
 A.prototype.a = "a";
 function B(x,y){
   this.y = y;
   A.call(this,x);
 }
 B.prototype.b1 = function(){
   alert("b1");
 }
 B.prototype = new A();
 B.prototype.b2 = function(){
   alert("b2");
 }
 B.prototype.constructor = B;
 var obj = new B(1,3);

 

   function A (X) {
         this.x=x;
  }

   A.prototype.a =‘a‘;

现在 function A (X) {
    this.x=x;
    this.a ="a";
}
   
    function B (x,y){
           this.y=y;
           A.call(this,x);
}


现在  function B (x,y){
        this.x=x;
this.y=y;
    
     
}

   B.prototye.b1=funcrion(){
       alert (‘b1‘);
}

现在  function B (x,y){
        this.x=x;
      this.y=y;
      this.b1=  funcrion(){
       alert (‘b1‘);
     
}


  B.prototype = new A();

  现在  B.prototype {
    this.x=x;
    this.a ="a";
}


 B.prototype.b2 = function(){
    alert("b2");
  }
现在:
   B.prototype {
    this.x=x;
    this.a ="a";
    this.b2 = function(){
    alert("b2");
  }
}

  B.prototype.constructor = B;
  var obj = new B(1,3);

输出: function B(1,3){
  this.y = y;
  A.call(this,x);
}

obj :{x:1;y:3}

 








以上是关于js中的原型的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

Chrome-Devtools代码片段中的多个JS库

Node.js JavaScript 片段中的跳过代码

关于js中的原型问题

谈谈JS中的原型