原型和原型链

构造函数(new运算符)

function Foo(name,age){
    // this = {};  默认有这一行，创建一个空对象
    this.name = name;
    this.age = age;
    this.class = 'class-1';
    // return this;  // 默认有这一行，可写可不写(建议不写)
}
var foo = new Foo('zhangsan',20);
// var foo2 = new Foo('lucy',22);  // 可创建多个对象

  1. 一个新对象被创建。它继承自Foo.prototype。
    分析：new Foo('zhangsan',20)的时候，创建了一个新对象（空对象），这个对象继承了构造函数Foo的原型对象(也就是Foo.prototype)

  2. 构造函数Foo被执行。执行的时候，相应的参数会被传入，同时上下文(this)会被指定为这个新实例。在不传递任何参数的情况下，new foo相当于new foo()。
    分析：构造函数Foo被执行，参数'zhangsan',20被传入，this指向了新的实例foo。所以通过构造函数中的this.name = name，新实例foo的属性name被设置为'zhangsan'。

  3. 如果构造函数返回了一个“对象”，那么这个对象会取代整个new出来的结果。
    如果构造函数没有返回对象，那么new出来的结果为经过步骤1和步骤2创建并执行后的对象，这是我们最常用的情况。
    分析：返回步骤1和步骤2创建并执行后的对象给实例
    补充：在构造函数里返回一个对象有什么意义吗，应用在哪里？
    回答：比如做权限管理的时候，符合条件的返回正常的实例，非法的可以传过去另一个对象，但是对于用户来说拿到的都是一个对象

注意：约定俗成，构造函数以大写字母开头

构造函数(new运算符) - 扩展

  1. var a = {};其实是var a = new Object();的语法糖
    下面两种方式是一样的。
var a = {name:'zhangsan'};
var b = new Object({name:'zhangsan'});
  1. var a = [];其实是var a = new Array();的语法糖
    下面两种方式是一样的。
var a = [1,2,3];
var b = new Array(1,2,3);
  1. function Foo(){...}其实是var Foo = new Function(){...}
  2. 使用instanceOf判断一个函数是否是一个变量的的构造函数
var a = {name:'zhangsan'};
var b = [1,2,3];
function Foo1(){
    console.log('hello 1');
}
console.log(a instanceof Object);       // true
console.log(b instanceof Array);        // true
console.log(Foo1 instanceof Function);  // true

创建对象有几种方法

第一种方法：使用字面量，或者new Object创建对象
// 字面量方式创建对象
var object1 = {name:'object1'};    

// 使用new Object创建对象，以下两种方式是一样的
var object2 = new Object({name:'object2'});    
var object3 = new Object();
object3.name = 'object3';

console.log(object1);  // {name: "object1"}
console.log(object2);  // {name: "object2"}
第二种方法：使用显式的构造函数创建对象
var M = function(name){
    this.name = name
}
var object3 = new M('object3');

console.log(object3);  // {name: "object3"}
第三种方法：使用Object.create创建对象
var P = {name:'object4'};
var object4 = Object.create(P);

console.log(object4);  // {}
console.log(object4.name);  // "name"

咦？这里object4的显示结果怎么是空对象？object4.name的显示结果却又是"name"了？
这里先留作悬念，在文章的最后解释这个现象。

原型规则

  1. 所有的引用类型(数组，对象，函数)，都具有对象特性，即可自由扩展属性。
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn() {}; fn.a = 100;

console.log(obj.a); // 100
console.log(arr.a); // 100
console.log(fn.a);  // 100
  1. 所有的引用类型(数组，对象，函数)，都有一个__proto__属性(原型对象/隐式原型)，属性值是一个普通对象。
  2. 所有的函数，都有一个prototype属性(原型对象/显式原型)，属性值是一个普通对象。
  3. 所有的引用类型(数组，对象，函数)，__proto__属性，就是它的构造函数的prototype属性。
console.log(obj.__proto__ === Object.prototype);    // true
  1. 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的原型对象中寻找。
// 构造函数
function Foo(name){
    this.name = name;
}
Foo.prototype.alertName = function (){
    alert(this.name);
}

// 创建实例
var foo = new Foo('zhangsan');
foo.printName = function (){
    console.log(this.name);
}

foo.printName();    // Console中显示'zhangsan'
foo.alertName();    // 弹出框中显示'zhangsan'

知识点：实例的属性，原型对象，构造函数中的this指向的都是实例本身。

原型规则 - 扩展

微信图片_20181128112525.png

示例代码：

var M = function(name){
    this.name = name
}
var object3 = new M('object3');
1.构造函数与实例的关系

通过new 构造函数的方式，可以创建一个对象实例
在示例代码中object3就是一个对象实例

2.构造函数与原型对象的关系

每个函数都有prototype属性，构造函数也是函数，所以也有prototype属性。
在声明构造函数的时候（就是我们在写function a(){...}的时候），JS引擎会给这个构造函数自动增加一个prototype属性。这个prototype属性会自动初始化一个空对象，也就是说prototype的值是一个对象（原型对象）。

console.log(M.prototype);  // {}

prototype的英文解释：原型，雏形

3.原型对象与构造函数的关系

原型对象怎么区分自己是被哪个构造函数所引用呢？
原型对象中会有一个构造器，默认是声明的函数会引用自己。

console.log(M.prototype.constructor===M);  // true

constructor的英文解释：构造器

4.实例与原型对象的关系

实例的proto属性，和构造函数的prototype属性，完全是同一个东西。

console.log(object3.__proto__===M.prototype);  // true

原型链

示例代码：

var M = function(name){
    this.name = name
}
M.prototype.say = function(){
    console.log('say hi');
}

var object3 = new M('object3');
var object5 = new M('boject5');

console.log(object3.say());  // "say hi"
console.log(object5.say());  // "say hi"

可以看出来，在构造函数的原型对象上，增加属性和方法，那么这个构造函数的实例都可以共用这些属性和方法。

原型链的基本原理：
任何一个实例对象，可以通过原型链找到原型对象。而原型对象上所有的属性和方法都是对实例共享的，这就是原型链的基本原理

JS引擎对JS对象的分析方式：
在访问一个对象实例的属性或方法时，如果在实例本身没有找到这个属性或方法，会往上在实例的原型对象(实例.__proto__)上查找这个属性或方法。
如果还没有找到这个属性或方法，会再往上在原型对象的原型对象(原型对象.__proto__ ，也可以说是：实例.__proto__.__proto__)上查找这个属性或方法。
依次类推，直到找到Object.prototype，如果还没有找到，那么就会提示这个属性或方法没有找到。

知识点

  • 只有函数有prototype属性，对象是没有的
  • 函数也是一个对象，所以函数也会有__proto__属性
    M.__proto__===Function.prototype的结果是true（这里的M是以上示例代码中的构造函数M）
    可以理解为：M的构造函数是Function
    也可以理解：M函数是Function函数的实例

instanceof的原理

instanceof用来判断某个对象是否是某个构造函数的实例。
f instanceof Foo的判断逻辑是，f的__proto__一层层往上，能否对应到Foo.prototype

示例代码：

var M = function(name){
    this.name = name
}
var object3 = new M('object3');

console.log(object3 instanceof M);  // true
console.log(object3 instanceof Object);  // true

分析：
Object构造了M，M构造了object3，这构成了一条原型链。
用instanceof来判断的时候，只要在这条原型链上，返回结果都是true。
这是不够严谨的，因为我们无法用instanceof来判断object3的直接构造函数是哪个。

那该怎么知道object3的直接构造函数是哪个呢？这是需要用到constructor了。

console.log(object3.__proto__.constructor===M);  // true
console.log(object3.__proto__.constructor===Object);  // false

关于使用Object.create创建对象的分析

回顾一下文章开头提到的现象，以下方式创建的object4，直接显示的话是一个空对象，然而用object4.name取值是"object4"。

var P = {name:'object4'};
var object4 = Object.create(P);

console.log(object4);  // {}
console.log(object4.name);  // "name"

console.log(object4.__proto__===P);  // true

分析：
首先，解释下Object.create(P)的意思。Object.create(P)会创建一个空对象，而这个空对象的原型对象，就是参数P。
所以，object4 = Object.create(P);会把对象P作为新对象的原型对象，然后把这个新对象赋给对象object4。
object4本身是不具备这个属性的，而通过原型链是能访问object3.name的。

常见问题

  • 如何判断一个变量是否是数组？
var a = [1,2,3];
var b = 10;
console.log(a instanceof Array);    // true
console.log(b instanceof Array);    // false
  • 写一个原型链继承的例子
    <div id="box">before</div>

    <script type="text/javascript">
        // 构造函数
        function Elem(id){
            this.elem = document.getElementById(id);
        }

        // 设置原型对象的属性
        Elem.prototype.html = function(val){
            if(val){
                this.elem.innerHTML = val;
                return this;
            }else{
                return this.elem.innerHTML;
            }
        }

        Elem.prototype.on = function(type,fn){
            this.elem.addEventListener(type,fn);
            return this;
        }

        // 实例化对象
        let elem = new Elem('box');

        // 操作
        elem.html('after').on('click',function(){
            alert('message:after');
        })
    </script>

操作结果：
页面显示"after"，且点击"after"会有弹出框，弹出框中的内容是"message:after"

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,793评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,567评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,342评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,825评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,814评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,680评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,033评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,687评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,175评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,419评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,020评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2赞 343