JavaScript原型、原型链

  • JS中的对象都从原型继承属性
  • 所有通过对象直接量创建的对象,都具有同一原型对象object.prototype
  • 通过Object.prototype获得对原型对象的引用
  • 通过[new]和[构造函数]和[{}]创建的对象的原型===[构造函数]的prototype属性的值
  • object.prototype无原型对象
    以下为Date.prototype的部分返回值

由此,可理解为:对象自带的一组方法、属性,并且可以通过object.prototype进行自定义原型

原型使用方式1:

在使用原型之前,我们需要先将代码做一下小修改:


        var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
};


然后,通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。

        Calculator.prototype = {
add: function (x, y) {
return x + y;
},

subtract: function (x, y) {
return x - y;
}
};
//alert((new Calculator()).add(1, 3));


 

上方创建一个Calculator对象,在内部实现setter赋值。而后通过prototype属性来设定对象的原型

这样,我们就可以new Calculator对象以后,就可以调用add方法来计算结果了。var a=new Calculator();a.add(1,2);//3

 

每一个函数、对象都有3大属性

## prototype —(原型是对象,实例继承对象的属性) 实例原型 构造函数指向原型

每一个JavaScript对象(null除外)在创建的时候就会与关联另一个对象,这个对象就是我们所说的原型每一个对象都会从原型”继承”属性

函数的prototype属性指向一个对象 这个对象,就点用该构造函数而创建的实例的原型
* 对象===a的原型


function Person() { }
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = ‘Kevin’;
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin</pre> </div> &nbsp; ![构造函数和实例原型的关系图](https://github.com/mqyqingfeng/Blog/raw/master/Images/prototype1.png)![实例与实例原型的关系图](https://github.com/mqyqingfeng/Blog/raw/master/Images/prototype2.png) <div> ## __proto__ ---对象指向原型 </div> 对象的属性,指向该对象的原型,见上方右图 <div> <pre>function Person() { }
var person = new Person();
console.log(person.proto === Person.prototype);
// true`
## constructor   原型指向构造函数

原型的属性

一个构造函数可以生成多个实例==》无法通过原型指向实例

![实例原型与构造函数的关系图](https://github.com/mqyqingfeng/Blog/raw/master/Images/prototype3.png)

## 实例与原型
  • 实例有自己的属性
  • 实例“继承”原型的属性
  • 实例不覆盖、不重写原型的属性
    当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。


    `function Person() {

    }

    Person.prototype.name = ‘Kevin’;

    var person = new Person();

    person.name = ‘Daisy’;
    console.log(person.name) // Daisy

    delete person.name;
    console.log(person.name) // Kevin`

    在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Daisy。

    但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

    原型的原型 — 原型是对象

  • 原型是对象

  • 原型对象是通过 Object 构造函数生成的

    var obj = new Object();
    obj.name = 'Kevin'
    console.log(obj.name) // Kevin


    Object.prototype 的原型是null ,没有原型

    `console.log(Object.prototype.proto === null) // true


原型链示意图

 

原型链

上图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

 

参考:http://www.cnblogs.com/tomxu/archive/2012/01/05/2305453.html#undefined

https://github.com/mqyqingfeng/Blog/issues/2

文章目录
  1. 1. 原型使用方式1:
  2. 2. 原型的原型 — 原型是对象
  3. 3. 原型链
|