JavaScript原型和原型链

http://zhangjiahao8961.iteye.com/blog/2070650

总结:

  1. 在 JavaScript 中,函数(function)是允许拥有属性的。所有的函数会有一个特别的属性 prototype;
    如 Function.prototype 或者 Object.prototype 又或者我们自己定义的函数或对象;
Function.prototype 
Object.prototype 


function doSomething(){}
console.log( doSomething.prototype );
// 和声明函数的方式无关,
// JavaScript 中的函数永远有一个默认原型属性。
var doSomething = function(){};
console.log( doSomething.prototype );

  1. 当谈到继承时,JavaScript 只有一种结构:对象。
    每个实例对象( object )都有一个私有属性(称之为 proto指向它的构造函数的原型对象(prototype )
function doSomething(){}
// 和声明函数的方式无关,
// JavaScript 中的函数永远有一个默认原型属性。
var doSomething = function(){};


var doSomethingInstance = new doSomething();
console.log(doSomethingInstance)
// 每个实例对象都有一个 __proto__ 属性;

{
    constructor: ƒ doSomething(),
    __proto__: {
        constructor: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),
        isPrototypeOf: ƒ isPrototypeOf(),
        propertyIsEnumerable: ƒ propertyIsEnumerable(),
        toLocaleString: ƒ toLocaleString(),
        toString: ƒ toString(),
        valueOf: ƒ valueOf()
    }
}

// 既有如下功能;

doSomething.__proto__ = doSomething.prototype

  1. 几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

  2. 构造函数

原型对象prototype中都有个预定义的constructor属性,用来引用它的函数对象。这是一种循环引用

person.prototype. constructor === person  //true

Function.prototype.constructor === Function //true

Object.prototype.constructor === Object //true

  1. 图解
var  person  =  function(name){
	this.name = name
};
 person.prototype.getName = function(){
        return this.name;
 }

 var ziji = new person(‘koala’);
 ziji.getName(); //koala

在这里插入图片描述
6. 原型继承

方法一:

function foo(){}
foo.prototype = {
  foo_prop: "foo val"
};

function bar(){}
var proto = new foo;
proto.bar_prop = "bar val";
bar.prototype = proto;

var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop);

优点:支持目前以及所有可想象到的浏览器(IE5.5都可以使用). 这种方法非常快,非常符合标准,并且充分利用JIST优化。

缺点:为使用此方法,这个问题中的函数必须要被初始化。 在这个初始化过程中,构造可以存储一个唯一的信息,并强制在每个对象中生成。但是,这个一次性生成的独特信息,可能会带来潜在的问题。另外,构造函数的初始化,可能会给生成对象带来并不想要的方法。 然而,如果你只在自己的代码中使用,你也清楚(或有通过注释等写明)各段代码在做什么,这些在大体上都根本不是问题(事实上,还常常是有益处的)。

方法二:

function foo(){}
foo.prototype = {
  foo_prop: "foo val"
};

function bar(){}

var proto = Object.create(
  foo.prototype
);

proto.bar_prop = "bar val";
bar.prototype = proto;

var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop);

// 或者

function foo(){}
foo.prototype = {
  foo_prop: "foo val"
};
function bar(){}

var proto = Object.create(
  foo.prototype,
  {
    bar_prop: {
      value: "bar val"
    }
  }
);
bar.prototype = proto;

var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop)

优点:支持当前所有非微软版本或者 IE9 以上版本的浏览器。允许一次性地直接设置 proto 属性,以便浏览器能更好地优化对象。同时允许通过 Object.create(null) 来创建一个没有原型的对象。

缺点:不支持 IE8 以下的版本。然而,随着微软不再对系统中运行的旧版本浏览器提供支持,这将不是在大多数应用中的主要问题。 另外,这个慢对象初始化在使用第二个参数的时候有可能成为一个性能黑洞,因为每个对象的描述符属性都有自己的描述对象。当以对象的格式处理成百上千的对象描述的时候,可能会造成严重的性能问题。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值