对象、类与原型链

作者: faremax | 来源:发表于2017-10-02 19:47 被阅读8次

js是一个基于对象的语言，所以本文研究一下js对象和类实现的过程和原理。

对象的属性及属性特性

下面是一个对象的各个部分：

var person = {
  name: "Lily",
  age: 10,
  work: function(){
    console.log("Lily is working...");
  }
};
person.gender = "F"; //可以动态添加属性
Object.defineProperty(person, "salary", {  //添加属性
  value: 10000,
  writable: true,  //是否可写，默认false
  enumerable: true,  //是否可枚举，默认false
  configuration: true  //是否可配置，默认false;
})；
Object.defineProperties(person, {  //添加多个属性
  "father": {
    value: Bob,
    enumerable: true
  },
  "mather": {
    value: Jelly,
    enumerable: true
  }
});
delete person.age; // 删除属性
Object.getOwnPropertyDescriptor(person, "father"); //{
value:10000,writable:true,enumerable:true,configuration:true}

是否可写指得是其值是否可修改；
是否可枚举指的是其值是否可以被for...in...遍历到；
是否可配置指的是其可写性，可枚举性，可配置性是否可修改，并且决定该属性可否被删除。

这是一个普通的对象和常见操作，不多说，下面是一个具有get/set的对象：

var person = {
  _age: 11,
  get age(){
    return this._age;
  },
  set age(val){
    this._age = val;
  }
};
//如下方法访问：
console.log(o.age); //读
o.age = 30;  //写
console.log(o.age);

对象的特性

上文，我们只提到了对象属性的4个性质，对象自己其实也有3个性质：

可扩展性

可不可扩展是指一个对象可不可以添加新的属性；Object.preventExtensions 可以让这个对象变的不可扩展。尝试给一个不可扩展对象添加新属性的操作将会失败，但不会有任何提示，(严格模式下会抛出TypeError异常)。Object.preventExtensions只能阻止一个对象不能再添加新的自身属性，仍然可以为该对象的原型添加属性，但proto属性的值也不能修改。

var person = {
  name: "Lily",
  age: 10
};    //新创建的对象默认是可扩展的
console.log(Object.isExtensible(person));  //true
person.salary = 10000;
console.log(person.salary)  //10000

Object.preventExtensions(person);//将其变为不可扩展对象
console.log(Object.isExtensible(person));   //false

person.height = 180; //失败,不抛出错误
console.log(person.height); //undefined

person.__proto__.height = 180; //在其原型链上添加属性
console.log(person.height); //180

delete person.age;   //可以删除已有属性
console.log(person.age);   //undefined
person.__proto__ = function a(){};  //报错TypeError: #<Object> is not extensible(…)

function fun(){
  'use strict'
  person.height = 180;  //报错TypeError: #<Object> is not extensible(…)
}
fun();

Object.defineProperty("height", {
  value: 180
});  //由于函数内部采用严格模式，所以报错TypeError: #<Object> is not extensible(…)

<small>这里如果不理解__proto__不要紧，下文会重点解释这个属性</small>

密封性

如果我们想让一个对象即不可扩展，又让它的所有属性不可配置，一个个修改属性的configurable太不现实了，我们把这样的对象叫做密封的(Sealed)。用Object.isSealed()判断一个对象是否密封的，用Object.seal()密封一个对象。其特性包括不可扩展对象和不可配置属性的相关特性。

var person = {
  name: "Lily",
  age: 10
};    //新创建的对象默认是不密封的
console.log(Object.isSeal(person));  //false

Object.seal(person);//将其变为密封对象
console.log(Object.isSeal(person));   //true

delete person.age;   //无法删除已有属性，失败，不报错。但严格模式会报错
console.log(person.age);   //undefined
person.__proto__ = function a(){};  //报错TypeError: #<Object> is not extensible(...)

冻结性

此时，这个对象属性可能还是可写的，如果我们想让一个对象的属性既不可写也不可配置，同时让该对象不可扩展，那么就需要冻结这个对象。用Object.freeze()冻结对象，用isFrozen()判断对象是否被冻结。由于相比上一个例子，仅仅是现有的变得不可写了，这里就不举太多例子了。
不过值得注意的是，对于具有setter的属性一样不可写。

var person = {
  name: "Lily",
  _age: 10,
  get age(){
    return this._age;
  },
  set age(val){
    this._age = val;
  }
};    //新创建的对象默认不是冻结的
console.log(Object.isFrozen(person));  //false

Object.freeze(person);//将其变为不可扩展对象
console.log(Object.isExtensible(person));   //false
console.log(Object.isSealed(person));   //true
console.log(Object.isFrozen(person));   //true

console.log(person.name);  //"Lily"
person.name = "Bob"; //失败，但不报错，但严格模式会报错。
console.log(person.name);  //"Lily"

console.log(person.age);   //10
person.age = 30;
console.log(person.age);   //10

深冻结和浅冻结

深冻结和浅冻结的主要差异出现在可扩展性上，所以你也可以理解为深可扩展和浅可扩展。我们看一下以下代码：

var person = {
  addr: {}
}

Object.freeze(person);
person.addr.province = "Guangzhou"; //浅冻结：对象的属性对象可以继续扩展
console.log(person.addr.province); //"Guangzhou"

为了实现深冻结，我们写一个函数：

var person = {
  name: "nihao",
  addr: {},
  family:{
    slibing:{},
    parents:{}
  }
}

deepFreeze(person);
person.addr.province = "Guangzhou"; //深冻结：对象的属性对象无法继续扩展
console.log(person.addr.province); //undefined
person.family.parents.father = "Bob"; //深冻结：对象的属性对象无法继续扩展
console.log(person.family.parents.father); //undefined

function deepFreeze(obj){
  Object.freeze(obj);
  for(key in obj){
    if(!obj.hasOwnProperty(key)) continue;
    if(obj[key] !== Object(obj[key])) continue;
    deepFreeze(obj[key]);  //递归调用
  }
}

注意，这里递归没有判断链表是否成环，判断有环链表是数据结构的知识，可以使用一组快慢指针实现，这里不赘述。因此在以下情况会有一个bug：

function Person(pname, sname){
  this.name = pname || "";
  this.spouse = sname || {};
}
var p1 = new Person("Lily");
var p2 = new Person("Bob", p1);
p1.spouse = p2;
deepFreeze(p1);  //会陷入无休止的递归。实际家庭成员关系更复杂，就更糟糕了。RangeError: Maximum call stack size exceeded(…)

构造函数(Constructor)

当我们想创建很多个人的时候，就不会像上面这样一个一个写了。那我们就造一个工厂，用来生产人(感觉有点恐怖)：

function CreatePerson(pname, page){
  return {
    name: pname,
    age: page
  };
}
p1 = CreatePerson("Lily", 21);
p2 = CreatePerson("Bob", 12);

console.log(p1);  //Object {name: "Lily", age: 21}
console.log(p2);  //Object {name: "Bob", age: 12}

但是这样写并不符合传统的编程思路。因此我们需要一个构造函数(constructor, 也有书译为构造器)

关于构造函数和普通函数的区别可以看javascript中this详解中”构造函数中的this"一节
。
下面定义一个构造函数：

function Person(pname, page){
  this.name = pname;
  this.age = page;
  this.work = function(){
    console.log(this.name + " is working...");
  };
}
var p1 = new Person("Lily",23);
var p2 = new Person("Lucy", 21);
console.log(p1);
p1.work();
console.log(p2);
p2.work();

不过这样写这个函数，每个对象都会包括一部分，太浪费内存。所以我们会把公共的部分放在prototype中：

function Person(pname, page){
  this.name = pname;
  this.age = page;
}
Person.prototype.work = function(){
  console.log(this.name + " is working...");
};
var p1 = new Person("Lily",23);
var p2 = new Person("Lucy", 21);
console.log(p1);
p1.work();
console.log(p2);
p2.work();

通过上面的输出，我们看到，每个对象(p1,p2)都包含了一个__proto__属性，这个是一个非标准属性（ES6已经把它标准化了）,不过IE中没有这个属性。

原型链与继承

在学习原型链之前我们一定要区分清楚：prototype是构造函数的属性，而__proto__是对象的属性。当然我们依然用代码说话：

再来一段代码：

function Person(pname, page){
  this.name = pname;
  this.age = page;
}
Person.prototype.work = function(){
    console.log(this.name + " is working...");
  };

var p = new Person("Lily",23);
console.log(p.constructor);  //function Person(){...}
console.log(p.__proto__);  //Object

console.log(Person.prototype); //Object
console.log(Person.prototype.constructor);  //function Person(){...}

console.log(Person.__proto__);
console.log(Person.constructor);

console.log(Person.__proto__);  //空函数function(){}
console.log(Person.constructor);   //function Function(){...}

说到这里，就有必要学习一下原型链了。
js没有类的概念，这样就不会有继承派生和多态，但是实际编程中我们需要这样的结构，于是js在发展过程中，就从一个没有类的语言模拟出来类的效果，这里靠的就是prototype。
一个构造函数的prototype永远指向他的父对象，这样这个构造函数new出来的对象就可以访问其父对象的成员，实现了继承。
如果他的父对象的prototype又指向一个父对象的父对象，这样一层层就构成了原型链。如下(用浏览器内置对象模型举例)：

console.log(HTMLDocument);
console.log(HTMLDocument.prototype); //HTMLDocument对象
console.log(HTMLDocument.prototype.constructor.prototype);
console.log(HTMLDocument.prototype.constructor.prototype.constructor.prototype);
console.log(HTMLDocument.prototype.constructor.prototype.constructor.prototype.constructor.prototype);
console.log(HTMLDocument.prototype.constructor.prototype.constructor.prototype.constructor.prototype.constructor.prototype);
/*......*/

如果你觉得这里应该有一张图，那就看看这个完整的对象关系图（基于DOM），下文的相关例子也基于这个图：

DOM内置类

注意：原型链是有穷的，他总会指向Object，然后是null结束

那么__proto__是什么？一言以蔽之:对象的__proto__属性指向该对象构造函数的原型。如下：

function Person(pname, page){
  this.name = pname;
  this.age = page;
  this.work = function(){
    console.log(this.name + " is working...");
  };
}
var o = new Person("Lily",23);
o.__proto__ === Person.prototype  //true

上面图中发现，对象还有一个constructor属性，这个属性也很重要，新创建对象的constructor指向默认对象的构造函数本身，不过现实没有这么简单。例如：

function Person(){
}
var p1 = new Person();
console.log(p1.constructor);  //function Person(){...}

function Children(){
}
Children.prototype = p1;//这一行和下一行联立使用，不能忽略下一行
Children.prototype.constructor = Children;  //修正constructor，这个不能省略

console.log(Person.prototype.constructor);  //function Person(){...}

console.log(p1.constructor); //function Child(){...}

当我们建立了一个继承关系后，会使新的构造函数的prototype.constructor指向改构造函数自己，像上面第9行一样。从第11行也可以看出，系统本身也是这样做的。这样就构成了下面这个图的关系，此时父对象的constructor指向子构造函数：

prototype

<small>注: 图片来自网络</small>

从上面的这些例子我们不难发现，函数也是一个对象。因此构造函数也有了constructor和proto属性。不过这里会比较简单：函数的constructor都是Function(){...};函数的__proto__都是个空函数

其实在js中除了基本类型(null, undefined, String, Number, Boolean, Symbol)以外，都是对象。可能你想反驳我：“js中一切都是对象”。我们看以下几个例子：

//以数字类型为例
var a = 1;   //基本类型
console.log(a);  //1
console.log(typeof a);  //number
var b = new Number(1);  //对象类型的数字
console.log(b);   //Number {[[PrimitiveValue]]: 1}
console.log(typeof b);  //object

首先，js中基本类型中除了null和undefined以外的类型，都具有对象形式。但对象形式不等于基本类型。从上面的输出结果来看，var a = 1;和var a = new Number(1);完全不是一回事。你或许会反驳我:"a有方法呀,基本类型怎么会有方法！！",我们再看下一个例子:

var a = 1;
console.log(a.toFixed(2));  //1.00
var b = new Number(1);
console.log(b + 2);  //3

上面的例子看似基本类型a有了方法，对象又可以参与运算。实际上这是隐式类型转换的结果，上面第二行，浏览器自动调用了new Number()把a转换成了对象，而第四行利用ValueOf()方法把对象转换成了数字。

既然函数也是个对象，那么我们不仅可以用构造函数new一个对象出来，也可以为它定义私有方法(变量)和静态方法

function Person(pname){
  var age = 10; //私有变量，外面访问不到
  function getAge(){  //私有方法，外面访问不到
    console.log(age);
  }
  this.name = pname;
  this.getInfo = function(){  //公有方法，也可以定义在prototype中
    console.log(this.name);
    getAge.call(this);  //注意这里的作用域和调用方式
  };
};
Person.speak = function(){console.log("I am a person");};  //静态方法

var p = new Person("Bob");
p.getInfo();    //Bob 10

Person.speak();    //"I am a person"

当然实现简单的对象继承不用这么复杂，可以使用Object.create(obj);返回一个继承与obj的对象。对与Object.create()方法需要考虑一下几种情况:

var o = {};
var r1 = Object.create(o);  //创建一个r1继承于o
var r2 = Object.create(null);  //创建一个r2继承于null
var r3 = Object.create(Object);   //创建一个r3继承于Object
console.log(r1); //是一个继承自o的对象
console.log(r2); //是一个空对象，没有__proto__属性
console.log(r3); //是一个函数

有了先前的知识，我们可以写出来一个函数实现Object.create()

function inherit(o){
  //if(Object.create) return Object.create(o);
  if(o !== Object(o) && o !== null)  throw TypeError("Object prototype may only be an Object or null");
  function newObj(){};
  newObj.prototype = o || {};
  var result = new newObj();
  if(o === null) result.__proto__ = null;
  return result;
}
var obj = {};
console.log(Object.create(obj));
console.log(inherit(obj));
console.log(Object.create(null));
console.log(inherit(null));
console.log(Object.create(Object));
console.log(inherit(Object));

看了这么多，怎么写继承比较合理，我们实现2个构造函数，让Coder继承Person。比较以下3种方法：

function Person(pname){
  this.name = pname;
}
function Coder(){}

//方法一：共享原型
Coder.prototype = Person.prototype;

//方法二：实例继承
Coder.prototype = new Person("Lily");
Coder.prototype.constructor = Coder;

//方法三：本质上还是实例继承
Coder.prototype = Object.create(Person.prototype);

当然还有其他的继承方法：

//方法4：构造继承
function Person(pname){
  this.name = pname;
}
function Coder(pname){
  Person.apply(this, argument);
}

//方法5：复制继承
function Person(pname){
  this.name = pname;
  this.work = function() {...};
}
var coder = deepCopy(new Person()); //拷贝
coder.code = function(){...};  //扩展新方法
coder.language = "javascript";  //扩展新属性
coder.work = function() {...};  //重构方法

//下面是深拷贝函数
function deepCopy(obj){
    var obj = obj || {};
    var newObj = {};
    deeply(obj, newObj);

    function deeply(oldOne, newOne){
        for(var prop in oldOne){
            if(!oldOne.hasOwnProperty(prop)) continue;
            if(typeof oldOne[prop] === "object" && oldOne[prop] !== null){
                newOne[prop] = oldOne[prop].constructor === Array ? [] : {};
                deeply(oldOne[prop], newOne[prop]);
            }
            else
                newOne[prop] = oldOne[prop];
        }
    }
    return newObj;
}

---	共享原型	实例继承	构造继承	复制继承
原型属性	继承	继承	不继承	继承
本地成员	不继承	继承	继承	继承
子类影响父类	Y	N	N	N
执行效率	高	高	高	低
多继承	N	N	Y	Y
obj instanceof Parent	true	true	false	false

既然方法这么多，我们该如和选择，一张表解释其中的区别

---	共享原型	实例继承	构造继承	复制继承
原型属性	继承	继承	不继承	继承
本地成员	不继承	继承	继承	继承
子类影响父类	Y	N	N	N
执行效率	高	高	高	低
多继承	N	N	Y	Y
obj instanceof Parent	true	true	false	false

子类的修改会影响父类是绝对不行的，所以共享原型是不能用的。在考虑到使用方便，只要不涉及多继承就用实例继承，多继承中构造继承也好于复制继承。

instanceof

instanceof用来判断对象是否某个构造函数的实例。这个东西很简单，不仅可以判断是否直接构造函数实例，还能判断是否父对象构造函数的实例

function Person(){}

var p = new Person();

console.log(p instanceof Person); //true
console.log(p instanceof Object); //true

多态/重构

js的方法名不能相同，我们只能模拟实现类似c++一样的多态。

编译时多态

注意：这个名字只是用了强类型语言的说法，js是个解释型语言，没用编译过程。

在方法内部判断参数情况进行重载

参数数量不同做不同的事情

//修改字体，仅用部分属性举例：
function changeFont(obj, color, size, style){
  if(arguments.lenght === 4){
    //当传入了参数为4个参数时候做的事情
    obj.style.fontSize = size;
    obj.style.fontColor = color;
    obj.style.fontStyle = style;
    return;
  }
  if(arguments.length === 2 && typeof arguments[1] === "object"){
    //当传入了参数为2个参数时候做的事情
    obj.style.fontSize = arguments[1].size || obj.style.fontSize;
    obj.style.fontStyle = arguments[1].style || obj.style.fontStyle;
    obj.style.fontColor = arguments[1].color || obj.style.fontColor;
    return;
  }
  throw TypeError("the font cannot be changed...");
}

参数类型不同做不同的事情

//构造简单对象
function toObject(val){
  if(val === Object(val)) return val;
  if(val == null) throw TypeError("'null' and 'undefined' cannot be an Object...");
  switch(typeof val){
    case "number": return new Number(val);
    case "string": return new String(val);
    case "boolean": return new Boolean(val);
    case "symbol": return new Symbol(val);
    default: throw TypeError("Unknow type inputted...");
  }
}

运行时多态

java的多态都是编译时多态。所以这个概念是源于c++的，c++利用虚基类实现运行过程中同一段代码调用不同的函数的效果。而在js中可以利用函数传递实现运行时多态

function demo(fun, obj){
  obj = obj || window;
  fun.call(this);
}

function func(){
  console.log("I'm coding in " + this.lang);
}

var lang = "C++";
var o = {
  lang: "JavaScript",
  func: function(){
    console.log("I'm coding in " + this.lang);
  }
};

demo(func);
demo(o.func);
demo(func, o);

重写

我们都知道子对象可以重写父对象中的函数，这样子对象函数对在子对象中替代父对象的同名函数。但如果我们希望既在子对象中重写父类函数，有想使用父类同名函数怎么办！分一下几个情况讨论：

//情况1
function Person(){
  this.doing = function(){
    console.log("I'm working...");
  };
}
function Coder(){
  Person.call(this);
  var ParentDoing = this.doing;
  this.doing = function(){
    console.log("My job is coding...");
    ParentDoing();
  }
}
var coder = new Coder();
coder.doing();  //测试


//情况2
function Person(){
}
Person.prototype.doing = function(){
  console.log("I'm working...");
};
function Coder(){
  Person.call(this);
  this.doing = function(){
    console.log("My job is coding...");
    Person.prototype.doing.call(this);
  };
}
var coder = new Coder();
coder.doing();  //测试

//情况3
function Person(){
}
Person.prototype.doing = function(){
  console.log("I'm working...");
};
function Coder(){
}
Coder.prototype = Object.create(Person.prototype);
Coder.prototype.constructor = Coder;
Coder.super = Person.prototype;
Coder.prototype.doing = function(){
  console.log("My job is coding...");
  Coder.super.doing();
};
var coder = new Coder();
coder.doing();  //测试

对象、类与原型链

对象的属性及属性特性

对象的特性

可扩展性

密封性

冻结性

深冻结和浅冻结

构造函数(Constructor)

原型链与继承

instanceof

多态/重构

编译时多态

运行时多态

重写

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端笔记