JS 中的原型 -- prototype、__proto__ 以及原型链

原文:

1.深入理解javascript原型和闭包——prototype原型

2.三张图搞懂JavaScript的原型对象与原型链

 

打开浏览器控制台,任意定义一个对象,打印出来后,会发现有最后一定有一个默认属性 “__proto__”,这是 js 的设计思路,类似于 java 中的继承。

 

注意:在本章中严格区分函数对象

 

prototype 与 __proto__

1.区别

var a = {};
console.log(a.prototype);  //undefined
console.log(a.__proto__);  //Object {}

var b = function(){}
console.log(b.prototype);  //b {}
console.log(b.__proto__);  //function() {}

 

2.__proto__ 指向谁?

 

/*1、字面量方式*/
var a = {};
console.log(a.__proto__);  //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*2、构造器方式*/
var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}

console.log(a.__proto__ === a.constructor.prototype); //false(此处即为图1中的例外情况)

 

 

3.原型链

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}(即构造器function A 的原型对象)
console.log(a.__proto__.__proto__); //Object {}(即构造器function Object 的原型对象)
console.log(a.__proto__.__proto__.__proto__); //null

 

 

 

prototype 属性

这个prototype的属性值是一个对象(属性的集合),默认的只有一个叫做 constructor 的属性,指向这个函数本身。如下图:

原型既然作为对象,属性的集合,不可能就只弄个constructor来玩玩,肯定可以自定义的增加许多属性。例如 Object 这个函数,该函数的prototype里面,就有好几个其他属性。

 

以上是 Object 的原型示意。

 

那么,我们自己定义的函数/对象中,可不可以进行自定义内? 答案: 可以。

function Fn() { }

Fn.prototype.name = '王福朋';
Fn.prototype.getYear = function () {
     return 1988;
};

 

 

这样做的意义在哪?

function Fn() { }

Fn.prototype.name = '王福朋';
Fn.prototype.getYear = function () {
    return 1988;
};

var fn = new Fn();
console.log(fn.name);    // 王福朋
console.log(fn.getYear());  // 1988

首先,定义了个空的 Fn 函数;

接着,自定义 Fn.prototype 属性;

其次,fn 对象是从 Fn 函数中 new 出来的;

 

 

因为每个对象都有一个隐藏的属性——“__proto__”,这个属性引用了创建这个对象函数的prototype(注意区分对象和函数)。即:fn.__proto__ === Fn.prototype

 

结论:每个对象都有一个隐藏的属性——“__proto__”,这个属性引用了创建这个对象函数的prototype(注意区分对象和函数)。

转载于:https://www.cnblogs.com/cc-freiheit/p/9418579.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值