JavaScript原型

博前“废话”

javascript脚本语言–简称JS。这和java编程语言存在很大的区别。刚开始理解的过程中所遇到的难度是JS的原型,所以这里写一篇关于JS原型的博客,让自己对JS原型有更深入的理解。

什么是JavaScript原型(prototype)?

我们知道在JavaScript语言与java一样都是面向对象的,但是由于JavaScript没有类的概念,所以JS并非真正意义上的面向对象编程语言,确切的JavaScript是一门基于对象的直译式脚本语言。因而JavaScript中的对象是有对象实例化的。这里便将基于类和基于原型的语言做比较:

  1. 基于类的语言中类就像一个模具,对象有这个模具浇注产生。
  2. 基于原型的语言中原型就像是一件工艺品的原件,可以通过一台100%精确的机器把这个原件复制出若干份。

区分两种类型的语言之后,现在来看看使用了原型的JavaScript代码:
<script>
function Student()
{}
Student.prototype.name = '伊泽瑞尔';
Student.prototype.showName = function()
{
alert("my name is "+this.name);
};
var student = new Student();
student.showName();
</script>

运行结果是页面显示一个内容为‘my name is 伊泽瑞尔’的提示对话框。

JavaScript原型与构造函数作比较

JS的构造函数就是能创建多个规划好的对象,通过new语句来创建对象。有如下几点需要注意:

  1. 构造函数内定义的属性继承方式与原型不同,子对象需要显式调用父对象才能集成构造函数内定义的属性.
  2. 构造函数内定义的任何属性,包括函数在内都会被重复创建,统一构造函数产生的两个对象不共享实例.
  3. 构造函数内定义的函数有运行时闭包的开销,因为构造函数内的局部变量对其中定义的函数来说也是可见的。

以上三点指出了JS中构造函数的缺点,这样说来是不是在构造函数内创建属性不好呢?其实未必,不管是构造函数还是原型,都应该在合适的范围使用。

原型和构造函数分别在什么时候使用呢?

  1. 为了减小开销,应尽量使用原型定义成员,除非必须要使用构造函数闭包。
  2. 由于原型定义的成员是多个实例共享的,所以尽量在构造函数内定于一般成员,特别是对象或数组。
    ##由原型引申出来的原型链机制 在JavaScript中有两个特殊的对象:Function和Object.这两个特殊对象都是是构造函数,作用是用来生成对象的。Function.prototype是包括构造函数在内的所有函数的原型,而Object.prototype则属所有对象的祖先。我们把JavaScript中对象大致分为三种类型:
    1. 用户创建的对象,即用new语句显示创建的对象。
    2. 构造函数对象,指的是普通的构造函数,即通过new调用生成普通对象的函数。
    3. 原型对象,特指构造函数prototype属性指向的对象。

    在这三类对象中每一类都有一个proto 属性,它指向该对象的原型,从任何对象沿着它开始遍历都可以追溯到Object.prototype.其中构造函数对象中有prototype属性,指向一个原型对象,通过该构造函数创建对象时,被创建对象的proto 属性将会指向构造函数的Prototype属性。而原型对象有constructor属性,指向它所对应的构造函数。
    关系图
    正如之前所说,JavaScript没有类的概念,那是不是也就没有继承呢?其实不然,在JavaScript中,它是存在继承的,写法 function Employee(name){Person.call(this,name)},它的继承是依靠一套叫做原型链(prototyp chain)的机制实现的。JavaScript中存在属性继承,然而它的本质就是一个对象可以访问到它的原型链上的任何一个原型对象的属性。如下例的Person对象,他拥有person._ porto_ 和 person. _ proto_ . _ proto_ 所有属性的浅拷贝(只复制基本数据类型,不复制对象). 所以可以直接访问person.constructor( 来自
    person._ porto_ ,即Person.prototype),person.toString(来自person._ proto_ . _ proto_,即Object.prototype).
    <script>
    function Person(){}
    Object.prototype.name = ' MyObject';
    Person.prototype.name = 'My Person';
    var obj = new Object();
    var person = new Person();
    alert(obj.name);//输出 MyObject
    alert(person.name);//输出My Person
    alert(person._proto_.name);//输出MyPerson
    alert(person.__proto__.__proto__.name);//输出MyObject
    alert(peron._proto_.constructor.prototype.name);//输出MyPerson
    </script>

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

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

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

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

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

    抵扣说明:

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

    余额充值