当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript面向对象精要(下部)

JavaScript面向对象精要(下部)

2017年12月12日  | 移动技术网IT编程  | 我要评论

构造函数和原型对象

构造函数也是函数，用new创建对象时调用的函数，与普通函数的一个区别是，其首字母应该大写。但如果将构造函数当作普通函数调用（缺少new关键字），则应该注意this指向的问题。

var name = "pomy";
function per(){
  console.log("hello "+this.name);
}
var per1 = new per(); //"hello undefined"
var per2 = per();  //"hello pomy"

使用new时，会自动创建this对象，其类型为构造函数类型，指向对象实例；缺少new关键字，this指向全局对象。

可以用instanceof来检测对象类型，同时每个对象在创建时都自动拥有一个constructor属性，指向其构造函数(字面量形式或object构造函数创建的对象，指向object，自定义构造函数创建的对象则指向它的构造函数)。

console.log(per1 instanceof per); //true
console.log(per1.constructor === per); //true

每个对象实例都有一个内部属性：[[prototype]]，其指向该对象的原型对象。构造函数本身也具有prototype 属性指向原型对象。所有创建的对象都共享该原型对象的属性和方法。

function person(){}
person.prototype.name="dwqs";
person.prototype.age=20;
person.prototype.sayname=function()
{
  alert(this.name);
};
var per1 = new person();
per1.sayname(); //dwqs
var per2 = new person();
per2.sayname(); //dwqs
alert(per1.sayname == per2.sayname); //true

所以，实例中的指针仅指向原型，而不指向构造函数。 es5提供了hasownproperty()和ispropertyof()方法来反应原型对象和实例之间的关系

alert(person.prototype.isprototypeof(per2)); //true
per1.blog = "www.ido321.com";
alert(per1.hasownproperty("blog")); //true
alert(person.prototype.hasownproperty("blog")); //false
alert(per1.hasownproperty("name")); //false
alert(person.prototype.hasownproperty("name")); //true

因为原型对象的constructor属性是指向构造函数本身，所以在重写原型时，需要注意constructor属性的指向问题。

function hello(name){
  this.name = name;
}
//重写原型
hello.prototype = {
  sayhi:function(){
    console.log(this.name);
  }
};
var hi = new hello("pomy");
console.log(hi instanceof hello); //true
console.log(hi.constructor === hello); //false
console.log(hi.constructor === object); //true

使用对象字面量形式改写原型对象改变了构造函数的属性，因此constructor指向object，而不是hello。如果constructor指向很重要，则需要在改写原型对象时手动重置其constructor属性

hello.prototype = {
  constructor:hello,
  sayhi:function(){
    console.log(this.name);
  }
};
console.log(hi.constructor === hello); //true
console.log(hi.constructor === object); //false

利用原型对象的特性，我们可以很方便的在javascript的内建原型对象上添加自定义方法：

array.prototype.sum=function(){
  return this.reduce(function(prev,cur){
    return prev+cur;
  });
};
var num = [1,2,3,4,5,6];
var res = num.sum();
console.log(res); //21
string.prototype.capit = function(){
  return this.charat(0).touppercase()+this.substring(1);
};
var msg = "hello world";
console.log(msg.capit()); //"hello world"

继承

利用[[prototype]]特性，可以实现原型继承；对于字面量形式的对象，会隐式指定object.prototype为其[[prototype]]，也可以通过object.create()显示指定，其接受两个参数：第一个是[[prototype]]指向的对象(原型对象)，第二个是可选的属性描述符对象。

var book = {
  title:"这是书名";
};
//和下面的方式一样
var book = object.create(object.prototype,{
  title:{
    configurable:true,
    enumerable:true,
    value:"这是书名",
    wratable:true
  }
});

字面量对象会默认继承自object，更有趣的用法是，在自定义对象之间实现继承。

var book1 = {
  title:"js高级程序设计",
  gettitle:function(){
    console.log(this.title);
  }
};
var book2 = object.create(book1,{
  title:{
    configurable:true,
    enumerable:true,
    value:"js权威指南",
    wratable:true
  }
});
book1.gettitle(); //"js高级程序设计"
book2.gettitle(); //"js权威指南"
console.log(book1.hasownproperty("gettitle")); //true
console.log(book1.isprototypeof("book2")); //false
console.log(book2.hasownproperty("gettitle")); //false

当访问book2的gettitle属性时，javascript引擎会执行一个搜索过程：现在book2的自有属性中寻找，找到则使用，若没有找到，则搜索[[prototype]]，若没有找到，则继续搜索原型对象的[[prototype]]，直到继承链末端。末端通常是object.prototype，其[[prototype]]被设置为null。

实现继承的另外一种方式是利用构造函数。每个函数都具有可写的prototype属性，默认被自懂设置为继承自object.prototype,可以通过改写它来改变原型链。

function rect(length,width){
  this.length = length;
  this.width = width;
}
rect.prototype.getarea = function(){
  return this.width * this.length;
};
rect.prototype.tostring = function(){
  return "[rect"+this.length+"*"+this.width+"]";
};
function square(size){
  this.length = size;
  this.width = size;
}
//修改prototype属性
square.prototype = new rect();
square.prototype.constructor = square;
square.prototype.tostring = function(){
  return "[square"+this.length+"*"+this.width+"]";
};
var rect = new rect(5,10);
var square = new square(6);
console.log(rect.getarea()); //50
console.log(square.getarea()); //36

如果要访问父类的tostring()，可以这样做：

square.prototype.tostring = function(){
  var text = rect.prototype.tostring.call(this);
  return text.replace("rect","square");
}

您可能感兴趣的文章:

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

相关文章:

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