资讯专栏INFORMATION COLUMN

javascript对象、类与原型链

adam1q84 / 789人阅读

摘要:下面定义一个构造函数不过这样写这个函数,每个对象都会包括一部分,太浪费内存。原型链与继承在学习原型链之前我们一定要区分清楚是构造函数的属性,而是对象的属性。但对象形式不等于基本类型。用来判断对象是否某个构造函数的实例。

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: # is not extensible(…)

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

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

这里如果不理解__proto__不要紧,下文会重点解释这个属性

密封性

如果我们想让一个对象即不可扩展,又让它的所有属性不可配置,一个个修改属性的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: # 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),下文的相关例子也基于这个图:

注意:原型链是有穷的,他总会指向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指向子构造函数

注: 图片来自网络

从上面的这些例子我们不难发现,函数也是一个对象。因此构造函数也有了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 false 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();  //测试

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97465.html

相关文章

  • Javascript面向对象与继承

    摘要:众所周知,是一门面向对象的语言,如果说针对面向对象来发问的话,我会想到两个问题,在中,类与实例对象是如何创建的,类与实例对象又是如何实现继承的。但是在中是指向的,因为每一个构造函数其实都是这个对象构造的,中子类的指向父类可以实现属性的继承。 众所周知,Javascript是一门面向对象的语言,如果说针对面向对象来发问的话,我会想到两个问题,在js中,类与实例对象是如何创建的,类与实例对...

    pcChao 评论0 收藏0
  • javascript类与继承

    摘要:的类与继承的类与一般的面向对象语言有很大的不同,类的标识是它的构造函数,下面先定义一个类显然我们可以看出这两个函数是不同的,虽然它们实现了相同的功能。利用构造函数来继承上面的方法子类显然无法继承父类的原型函数,这样不符合我们使用继承的目的。 javascript的类与继承 javascript的类与一般的面向对象语言有很大的不同,类的标识是它的构造函数,下面先定义一个类 var ...

    impig33 评论0 收藏0
  • 《前端竹节》(3)【原型对象

    摘要:从原型对象指向构造函数画一条带箭头的线。线上标注,表示该原型对象的构造函数等于。但除此之外,若构造函数所指的显示原型对象存在于的原型链上,结果也都会为。执行构造函数,并将指针绑定到新创建的对象上。 做前端开发有段时间了,遇到过很多坎,若是要排出个先后顺序,那么JavaScript的原型与对象绝对逃不出TOP3。 如果说前端是海,JavaScript就是海里的水 一直以来都想写篇文章梳理...

    lentrue 评论0 收藏0
  • JavaScript基础: 类与继承

    摘要:类的方法相当于之前我们定义在构造函数的原型上。的构造函数中调用其目的就是调用父类的构造函数。是先创建子类的实例,然后在子类实例的基础上创建父类的属性。 前言   首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励。    许久已经没有写东西了,因为杂七杂八的原因最近一直没有抽出时间来把写作坚持下来,感觉和跑步一...

    liuchengxu 评论0 收藏0
  • TS 类与接口

    摘要:二正文中与的区别接口只声明成员方法,不做实现。在中,我们可以采用全新的基于类继承的模式设计更优雅的语义化接口,这是因为中的可以继承动态构造的类,这一点和其他的静态声明类的编程语言不同。 一 前言 1.在typescript上遇到过实例化对象的两种写法:implement和extends。extends很明显就是ES6里面的类继承,那么implement又是做什么的呢?它和extends...

    garfileo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<