JavaScript原型编程

2023年5月3日 259次阅读 来源: 贱贱贱贱贱

一开始接触JavaScript的时候了解这是一门面向对象的语言,通过面向对象的方式构建了下面的代码

var View = function () {
  this.height = 0;
  this.width = 0;
  this.background = '白色';
  this.childs = [];
}
View.prototype.addChild = function (view) {
  this.childs.push(view);
  console.log('添加子视图');
}

var ButtonView = function() {
  View.call(this);
}
ButtonView.prototype = Object.create(View.prototype);
ButtonView.prototype.onclik = function () {
  console.log('点击了');
};

var button = new ButtonView();
button.onclik();
//点击了
var button2 = new ButtonView();
button.addChild(button2);
//添加子视图

后来正式系统的学了JavaScript才知道这语言和其他面向对象的语言是不同的,JavaScript是没有类和继承的概念的,能够不依靠类,构造出对象,上面代码是依靠prototype模仿了类和继承。
JavaScript 可以通过构造函数来创建对象, * 构造函数是要 new+一个函数 才是构造函数 *

var button = new ButtonView();

上面生成button对象分成四个步骤

  • 创建一个空对象var o = {};
  • 将空对象的prototype赋值o.prototype = ButtonView.prototype;
  • 将函数的this指向0执行函数 * 在JavaScript函数中如果没有return 默认就是 return undefined 在构造函数中如果return的不是一个引用类型的将return this *
  • button = 函数返回的对象

这就是构造函数的大致过程,然后我要讲的就是第二步中的prototype

prototype是对象内置的一种属性,是一种对其他对象的引用属性,button.background操作的时候,首先对button对象进行检查是否有该属性,如果没有的话则会通过prototype访问委托对象,如果有原型对象有background属性则返回,没有则继续委托该原型的prototype直到Object.prototype,这样就形成了一条原型链。

如果对my进行set操作,比如button.background = '黑色',将会分成三种情况。

  • 一般情况prototype.background是可读写那么会直接在button对象赋值,这样访问background属性的时候因为button对象已经有了该属性,button.prototype
  • 如果prototype.background只读,那么将无法设置background
  • 如果prototype.background有Set方法那将直接执行set方法,无视上面两种情况

在写JavaScript代码的时候,我们应该抛开以前学习用类来设计的方法,虽然JavaScript可以模拟,但是不是最适合的,写起来总觉得别扭。JavaScript更适合通过委托的方式在编写。比如在一开始写的代码,改成通过委托对象的思维变换成下面代码

var View ={
  height: 0,
  width: 0,
  background: '白色',
  childs: [],
  addChild: function (view) {
    this.childs.push(view);
    console.log('添加子视图');
  }
}

var ButtonView = Object.create(View);
ButtonView.onclik = function () {
  console.log('点击了');
};

var button = Object.create(ButtonView);
button.onclik();
//点击了
var button2 = Object.create(ButtonView);
button.addChild(button2);
//添加子视图

代码变得清晰多了

博客地址

    原文作者：贱贱贱贱贱
    原文地址: https://www.jianshu.com/p/be8cd980240d
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞