原型和原型链知识点整理

根部一些网上和平时学习的内容整理的，希望可以帮到大家，共同学习。

一、原型的规则

1、所有的引用类型（数组，对象，函数），都具有对象属性，即可自由扩展属性（null除外)；

2、所有的引用类型（数组、对象、函数），都有一个__proto__属性（__proto__是隐式原型），属性值是一个普遍的对象；

3、所有的函数，都有一个prototype属性（prototype是隐式原型），属性值也是一个普遍的对象；

4、所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性；

//eg1:
 var obj={};
obj.a=100;
console.log(obj.__proto__===Object.prototype)//true

//eg2:
function Foo(name){
    this.name=name;
}
var f1=new Foo('xiaorong');
f1.__proto__===Foo.prototype //true

5、当试图得到一个对象的属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。

//eg:
function Foo(name,age){
    this.name=name;
    this.age=age;
}
Foo.prototype.alertName = function(){
    console.log("原型链方法:"+this.name);
}
var f1 = new Foo('Mike',20);
f1.printName = function(){
    console.log("自己的方法："+this.name);
}
(注：f1.__proto__ === Foo.prototype,
    Foo.prototype.construtor === Foo,
    f1.__proto__.constructor === Foo)
//test
f1.printName();//自己的方法：Mike
f1.alertName();//原型链方法:Mike,f1没有alertName的方法，会到原型链上查找；
f1.toString();//"[object Object]",会到更上一级的原型链上去寻找，f1.__proto__.__proto__......中查找

二、关系图

原型和原型链知识点整理

三、instanceof

作用:用于判断引用类型属于哪个构造函数的方法。

//eg:
typeof 'abc'       //"string"
typeof 123         //"number"
typeof false       //"boolean"
typeof undefined   //"undefined"

typeof null        //"object"
typeof [1,2,3]     //"object"
typeof {a:1}       //"object"

可见typeof不能准确区分对象和数组，都返回了Object

var f1=function(){ console.log(111)}
typeof f1          //"function"

[1,2,3] instanceof Array  //true
var obj={'a':1}
obj instanceof Object  //true

原理：实例对象-------(instanceof)------->构造函数

//eg:
function Moo(name){
    this.name=name;
}
var m1 = new Moo('oo');
m1 instanceof Moo //true
m1 instanceof Object //true,可见instanceof不能判断是直接原型还是间接原型
m1.__proto__ === Moo.prototype //true
Moo.prototype.__proto__ === Object.prototype  //true
m1.__proto__.constructor === Moo              //true
m1.__proto__.constructor === Object           //false，可以看出Moo是m1的直接原型，Object不是

四、new运算符

1、描述new一个对象的过程：

//构造函数
function Foo(name,age){
    this.name = name;
    this.age = age;
    //return this;//默认有这一行
}
var f = new Foo('Mike',25);

过程：
①.创建一个新对象；
②.this指向这个新对象；
③.折行代码，对this赋值；
④.返回this。

2、new运算符的工作原理

var new = function(func){
    var o = Object.create(func.prototype);
    var k = func.call(o);
    if(typeof k==='Object'){
        return k;
    }else{
        return o;
    }
}

原型和原型链知识点整理

相关推荐