当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript基于原型的面向对象系统创建使用教程

JavaScript基于原型的面向对象系统创建使用教程

2019年01月22日  | 移动技术网IT编程  | 我要评论

我们知道在javascript中一切（引用类型）都是对象，对象是属性的集合，但是javascript中的对象到底是怎么创建的呢？在java中是通过实例化类来创建一个对象，对象总是从类中的创建而来；在javascript中没有类(es6中的class只是一个语法糖)的概念，那么javascript中的对象呢？javascript是基于原型的面向对象语言，在原型思想中，类并不是必需的，对象未必需要从类中创建而来，一个对象是通过克隆另外一个对象所得到的。重要的事情说三遍：对象是通过克隆另外一个对象所得到的，对象是通过克隆另外一个对象所得到的，对象是通过克隆另外一个对象所得到的。

javascript原型模式是用于创建对象的一种模式，先找到一个对象，然后通过克隆来创建一个一模一样的对象。ecmascript5提供了object.create()方法，可以用来克隆对象。

let person = function () {
  this.name = 'shanshui'
  this.age = '18'
}
let person = new person()
person.name = 'zinong'
person.age = '20'
let cloneperson = object.create(person)
console.log(cloneperson.name) // 'zinong'
console.log(cloneperson.age) // '20'

cloneperson是通过克隆person 对象而来。但是person对象又是怎么创建的呢？在javascript语言中，我们并不需要关系克隆的细节，因为这是引擎内部负责实现的，我们所需要做的只是显示地调用let obj1 = new object()或者let obj2 = {}。此时，引擎内部会从object.prototype上面克隆一个对象出来，我们最终得到的就是这个对象。

let person = new person()使用new运算符从person构造函数中创建一个person 对象，用new运算符来创建对象的过程中，实际上也只是先克隆object.prototype对象，再进行一些其他额外操作的过程。下面看看let person = new person()的时候new做了什么。

var obj = new object()
obj.__proto__ = person.prototype
person.call(obj)

new做法是新建一个object对象obj ，并且让obj 的__proto__指向了person.prototype对象，并且使用call 进行强转作用环境，从而实现了实例的创建。

object.create的实现代码如下，object.create内部定义了一个f构造函数，并且让f.prototype对象赋值为引进的对象/函数proto，并return出一个新的对象。object.create克隆返回的对象也是使用new运算符创建的。

if (typeof object.create !== "function") {
    object.create = function (proto, propertiesobject) {
        if (typeof proto !== 'object' && typeof proto !== 'function') {
            throw new typeerror('object prototype may only be an object: ' + proto);
        } else if (proto === null) {
            throw new error("this browser's implementation of object.create is a shim and doesn't support 'null' as the first argument.");
        }

        if (typeof propertiesobject != 'undefined') throw new error("this browser's implementation of object.create is a shim and doesn't support a second argument.");

        function f() {}
        f.prototype = proto;

        return new f();
    };
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网