面向对象原型对象，原型链初解

最新推荐文章于 2025-12-15 15:23:28 发布

原创最新推荐文章于 2025-12-15 15:23:28 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入讲解面向对象编程的概念，探讨如何使用构造函数和原型链来高效地管理和组织代码。介绍了构造函数的作用及其实例对象的创建过程，并展示了如何利用原型链避免重复创建方法，从而节省内存。

面向对象

面向对象编程，对需求做出分析进行分析，耦合关系设计
例:
轮播图设计：功能：
事件绑定功能：在事件里更改下标
下标更改功能
动画切换功能：根据下标的更改去进行动画

构造函数

构造函数就是被new调用的普通函数，普通函数和构造函数早声明阶段是没有区别的
区别构造函数的主要方式是命名：构造函数的首字母一般都大写

//	Object  Array  Number

作用

构造函数的作用就是构造一个空对象

function F00(){

}

构造函数构造出来的对象是数据和算法的载体
属性，方法

{a:10,	foo:function(){} }

我们把构造函数构造出来的对象称为实例对象
构造函数的抽象的：对程序的预设置
对象是具体的：传入数据，构造函数会帮助我们完成具体数据的计算和承载

构造函数的使用
1.向对象写入属性的方式

//一般写入
var obj= {  }
obj.a = 10
obj.b= function(){
}

2.构造函数写入属性的方式

function Foo(){
//	this :指向了构造函数创造出来的实例对象
	this.a = 10;
	this.b = 20;
var foo = new Foo()
console.log(foo)
//结果
Foo{a:10,b:20}

那么构造函数在调用的时候干了什么

function  Foo(){
//创建了一个空对象Foo{} 也就是foo的实例对象
// 2. 把this指向绑定给实例对象;
// 结论 : 在构造函数之中可以直接通过this访问实例对象;
// 3. 在函数的最后方默认返回了这个实例对象;
}

这种设计模式叫做

工厂模式

原料：实例对象：（也就是一个空对象，数据的载体）
加工：通过空对象的访问，想空对象中添加属性和方法
出厂：在外部可以访问的数据

是具有复用性的，传入不同数据可以导出不同的产品
（一个工厂不可能只会做一个产品，加工模式是固定的但是你的传入的原材料，数据是可以变化的就像是一个做睡衣的工厂，你传入的原材料是羊毛，那么做出来的就是用羊毛做的睡衣，给的是涤纶那就是涤纶的睡衣）

function Foo( a , poo ){
      this.a = a;
            this.poo = poo
      }
   	var foo1 = new Foo( 20 , function(){ console.log(1)});
      var foo2 = new Foo( 30 , function(){ console.log(2)});
      console.log(foo1, foo2);
      foo1.poo()
      foo2.poo()
//结果
Foo{a:20,poo:f}
Foo{a:30,poo:f}
1
2

总结

1.任何的函数都可以是构造函数
2.构造函数内部用this去访问实例对象
3.构造函数是工厂模式可以去批量加工数据
4.构造函数执行时分为三个步骤：

创建一个实例对象
把this指向实例对象
把this指向返回

例子

function CreatePersonMsg( name , age , hobby ){
        this.name  = name;
        this.age   = age;
        this.hobby = hobby;
        // 配套功能 : 
        // show是一个函数;
        // 这个函数想要展现实例对象之中的数据 ; 
        
        this.show = function(){
        console.log("大噶好我是"+this.name , "我的年龄是"+this.age ,
               "我的爱好是" + this.hobby );
        }
  }
//分析一下this指向，CreatePersonMsg里的this指向实例对象，
//show方法里的 this是谁调用show就指向谁
//所以这里CreatePersonMsg里的this都是指向实例对象也就是下面的p1，p2，p3
        var p1 = new CreatePersonMsg( "熊大" , 7 , "打游戏");
        var p2 = new CreatePersonMsg( "熊二" , 6 , "吃蜂蜜" );
        var p3 = new CreatePersonMsg( "光头强" , 40 , "砍树" );

        p1.show();

在上面的批量创建程序是有缺陷的，show方法是共用的不需要每次调用都创建一个不同的show，创建多个show浪费内存

原型链:

function Foo(){
      this.show = function(){
      }
}
var foo1 = new Foo();
var foo2 = new Foo();

console.log(foo1 === foo2);//false
// 功能是不会被更改的;
// 功能是为了服务数据而生的;
// 实例对象上的功能(函数)会被重复创建， 这个重复创建是没有必要的;
console.log(foo1.show === foo2.show)//true

//在面向对象整个编程过程之中来说 : 
//实例对象负责承载数据;
//原型对象负责承载方法;
 
//原型对象 :  是函数的伴生体;
//一个函数被声明了，那么这个函数一定有配套的原型对象;
//原型对象可以用来存储数据和方法。不过一般都用来存储方法

//访问原型对象 :
//构造函数访问： xxx(函数名).prototype 
//实例对象访问：	xxx(实例对象名).__proto__

使用原型对象解决上面的show重复调用问题

function CreatePersonMsg( name , age , hobby ){
       this.name  = name;
        this.age   = age;
        this.hobby = hobby;
        // 配套功能 : 
        // show是一个函数;
        // 这个函数想要展现实例对象之中的数据 ; 
  }
  CreatePersonMsg.prototype.show  = function(){
  console.log("大噶好我是"+this.name , "我的年龄是"+this.age ,
        "我的爱好是" + this.hobby );
  }   
  //分析一下this指向，CreatePersonMsg里的this指向实例对象，
  //show方法里的 this是谁调用show就指向谁
  //所以这里CreatePersonMsg里的this都是指向实例对象也就是下面的p1，p2，p3
  var p1 = new CreatePersonMsg( "熊大" , 7 , "打游戏");
  var p2 = new CreatePersonMsg( "熊二" , 6 , "吃蜂蜜" );
  var p3 = new CreatePersonMsg( "光头强" , 40 , "砍树" );

  p1.show();
  /*找寻show方法过程，从内到外查找，在自己身上没找到就去自己的原型上找，
  找到了就直接调用没找到就继续去下一个原型上找，
  直到找到show方法进行调用。如果在找到最后的object.prototyep都没有找到
  那么得到的结果就是undefined
  这一套数据查询机制 => 原型链;*/
  //现在的show方法一样可以由实例对象调用
  //两个实例对象调用的show方法都是同一个show方法不存在浪费内存