美文网首页饥人谷技术博客
JavaScript原型对象与继承

JavaScript原型对象与继承

作者: _贺瑞丰 | 来源:发表于2017-09-14 01:14 被阅读24次

1.原型对象与构造函数

无论什么时候,创建了一个函数后。
1.函数拥有propertype属性。值为这个函数的原型对象的指针。
2.同时对于原型对象,其拥有constructor就指向原来的函数(什么值类型的)
3.原型对象开始只获得constructor属性(默认的)。
4.用构造函数构造对象,实例也会有prototype: 指向原型对象

function Person() {
}
//这里做了两件事。PS中指向了一个原型对象prototype.而原型对象也GET到了constructor属性和其他一堆属性。
 Person.prototype.name = '原型名'
 Person.prototype.age = '原型年纪'
 Person.prototype.job = '原型小白鼠'
 Person.prototype.sayname = function () {
    alert(this.name)
 }
console.log(Person.prototype.isPrototypeOf(person1)) //返回true
var person1 = new Person();
//这里新建了一个person1对象,并且构造函数作用域指向新对象,执行构造函数的代码,返回新对象。

1.1为了简洁而重写原型对象

function Person() {
}
 //原型对象用字面量形式创建,实际上constructor就变成了Object.
Person.prototype ={
  name : '原型名',
  age : '原型年纪',
  job : '原型小白鼠',
  sayname : function(){
    alert(this.name);
  }
} 
var person1 = new Person();

重写之后要注意,在重写之前新建的实例还是指向原来的原型对象的。

1.2原型对象的弊端

  • 没有传参数,创建出来的所有实例属性都是共享的。
  • 当原型对象中属性不是基本值,而是引用值得时候。我们在实例中访问该属性,然后指向了该引用,如果是赋值还好,会直接覆盖。如果是对该引用指向的对象做操作,那么就会引起原型被更改,造成所有势力属性的变化。

1.3构造与原型并用

  • 构造函数太复杂,复用性太差。
  • 原型复用性高,但所有属性全共享了。
    为了解决以上的问题,我们两种方法混用。
    构造函数中 写入一些比较个性化的属性。而在原型对象中保存一些共享的属性和方法。

还有几种构造函数模式未总结

2. 继承:原型链

基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。

2.1原型链细节

例子:

  • 建立一个超集函数(超集的原型),一个子集函数,并且子集函数的实例(新对象)是通过new超集函数构建起来的(意味着新对象的原型是超集的原型)。
function 超集函数(){
  this.property = true;
  this.age = '1';
}
超集函数.prototype.getSuperValue = function(){
  return this.property;
};
超集函数.prototype.name = '我是超级原型函数对象'
function 子集函数(){
  this.subproperty = false;
}
//inherit from 超集函数
子集函数.prototype = new 超集函数();
子集函数.prototype.name = '我是子集原型'
子集函数.prototype.getSubValue = function (){
  return this.subproperty;
};
console.log(子集函数.prototype)
console.log((超集函数.prototype))
console.log(超集函数.prototype.isPrototypeOf(子集函数.prototype)) //true.

3.练习题

function foo(){
  foo.abc = function (){console.log('456')}
  this.def = this.abc;
  this.abc = function(){console.log('def')}
  abc = function(){console.log('@@@@@')}
  var abc = function () {console.log('$$$$$')}
}
foo.abc = function () {
  console.log('123')
}
foo.prototype = {
  abc : function (){console.log('abc')}
}
foo.abc();// 123
var f = new foo();
f.def();//abc
f.abc();//def
foo.abc()//456

相关文章

  • Javascript继承的原理

    JavaScript的继承是通过原型链继承,与传统面向对象的继承方式不同。 prototype与原型 我们从头开始...

  • javascript的面向对象编程

    原型 类似与继承关系(只是变成了对象继承对象) JavaScript不区分类和实例的概念,而是通过原型(proto...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • JS-Object 对象原型

    通过原型这种机制,JavaScript中的对象从其他对象继承功能特性,这种继承机制与经典的面向对象编程语言的继承机...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • JavaScript Class 完全指南

    JavaScript 使用原型继承:每个对象都从原型对象继承属性和方法。 Java 或 Swift 等语言中作为创...

  • JS中的原型我们来搞懂它

    原型是什么? JavaScript对象可以从其他对象那里继承属性和行为,更具体的来说,JavaScript使用原型...

  • JavaScript原型对象与继承

    1.原型对象与构造函数 无论什么时候,创建了一个函数后。1.函数拥有propertype属性。值为这个函数的原型对...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • Javascript-原型与原型链

    简单介绍 JavaScript 每个对象都拥有一个原型对象,对象以其原型为模板从原型中继承方法和属性; 原型对象也...

网友评论

    本文标题:JavaScript原型对象与继承

    本文链接:https://www.haomeiwen.com/subject/nndqsxtx.html