JavaScript 面向对象之构造函数 + 原型模式

🌙
手机阅读
本文目录结构

组合使用构造函数模式与原型模式

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。

构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。另外,这种混成模式还支持向构造函数传递参数;可谓是集两种模式之长。

function CreateJsPerson(name, age) {
  this.name = name;
  this.age = age;
  this.like =["one","two"];
}
CreateJsPerson.prototype = {
  constructor:CreateJsPerson,
  writeJs:function(){
    console.log("my name is " + this.name + ",i can write js 啦!!");
  }
};
var p1 = new CreateJsPerson("zhu1", 18);
var p2 = new CreateJsPerson("zhu2", 28);
p1.writeJs();//->my name is zhu1,i can write js 啦!!
p2.writeJs();//->my name is zhu2,i can write js 啦!!
p1.like.push("p1-like");
console.log(p1.like);//["one", "two", "p1-like"]
console.log(p2.like);//["one", "two"]
console.log(p1.writeJs === p2.writeJs);//->true
console.log(p1.like === p2.like);//->false

在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性 constructor 和方法 writeJs() 则是在原型中定义的。

而修改了 p1.like (向其中添加一个新字符串),并不会影响到 p2.like ,因为它们分别引用了不同的数组。

这种构造函数与原型混成的模式,是目前在 ECMAScript 中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说,这是用来定义引用类型的一种默认模式。

1、构造函数模式中拥有了类和实例的概念,并且实例和实例之间是相互独立开的 ->实例识别

  1. 基于构造函数模式的原型模式解决了方法或者属性公有的问题
  2. 把实例之间相同的属性和方法提取成公有的属性和方法
  3. 想让谁公有就把它放在 CreateJsPerson.prototype 上即可
  • 1、每一个函数数据类型(普通函数、类)都有一个天生自带的属性:prototype(原型), 并且这个属性是一个对象数据类型的值
  • 2、并且在 prototype 上浏览器天生给它加了一个属性 constructor(构造函数), 属性值是当前函数(类)本身
  • 3、每一个对象数据类型(普通的对象、实例、prototype…) 也天生自带一个属性:__proto__,属性值是当前实例所属类的原型 (prototype)
function Fn() {
  this.x = 100;
  this.sum = function () {
  };
}
Fn.prototype.getX = function () {
  console.log(this.x);
};
Fn.prototype.sum = function () {
};
var f1 = new Fn;
var f2 = new Fn;
console.log(Fn.prototype.constructor === Fn);//->true

2、Object 是 JS 中所有对象数据类型的基类(最顶层的类)

//1)、f1 instanceof Object ->true 因为 f1 通过__proto__可以向上级查找,不管有多少级,最后总能找到 Object
//2)、在 Object.prototype 上没有__proto__这个属性

function Fn() {
  this.x = 100;
  this.sum = function () {
  };
}
Fn.prototype.getX = function () {
  console.log(this.x);
};
Fn.prototype.sum = function () {
};
var f1 = new Fn;
var f2 = new Fn;
//  console.log(Fn.prototype.constructor === Fn);//->true
console.log(f1 instanceof  Object);//->true
console.dir(f1);//->原型,原型链的查找;

3、原型链模式

原型链查找机制!

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了