Javascript中prototype属性

prototype作为JS相对比较难理解的一个知识点,在这里发表下自己的理解。

本文将包含以下几部分内容:

1、js prototype的简单介绍,

2、js构造函数的介绍,

3、prototype的深入理解,

4、constructor。

一、在其他的面向对象语音中,比如Java,存在类(class)的概念,对象就是类的实例。但是再js当中呢,是没有类的概念的,平常时说的加一个class类是指在样式css中加一个类class。js中一切皆对象,所有的东西都是对象(除了null和undefined),js中所有的东西都是由object衍生而来的,原型链终点指向Object.prototype。

二、js构造函数

在介绍prototype之前先来对JS的构造函数做个简单的介绍。如果熟悉Java的同学应该了解Java的构造函数默认存在类中,也可以自定义类的构造函数,通过构造函数去new 一个对象。那么在JavaScript中什么是构造函数呢,所谓的构造函数,简单来说就是提供了一个生成对象的模板并描述对象的基本结构的函数,对象就是构造函数的实例。

构造函数有一下特点:

1.首字母大写,

2.使用new 来调用构造函数返回实例对象,

3.构造函数中使用this指向生成的对象实例。

下边提供一个简单的例子:

function Person(name){
    this.name=name;
}
var lucy=new Person(‘lucy‘);
console.log(lucy.name);

这里将输出lucy。

这例子就是使用Person构造函数使用new关键字生产person的实例对象lucy。

但是构造函数也存在缺点,就是当构造函数存在一个方法A的时候,当创建对象的时候会在每个实例都生成一个A方法,对象与对象之间的A方法是不一样的,无法实现共享,所以就导致资源的浪费。一下例子说明:

function Person(name){
    this.name=name;
    this.say=function(){
        alert("say something !")
    }
}
var lucy=new Person(‘lucy‘);
var tom =new Person(‘tom‘);
console.log(lucy.name); //‘lucy‘
 console.log(tom.name); //‘tom‘
 console.log(lucy.say===tom.say); //false

以上例子就说明同一个构造函数的对象实例之间无法共享属性或方法。

三、关于prototype

上边说的构造函数无法共享的缺点用prototype将得到很好的解决。

js prototype的定义:prototype 属性使您有能力向对象添加属性和方法。

用法:object.prototype.name=value。用法实例:

function Person(name){
            this.name=name;
            this.say=function(){
                alert("say something !")
            }
        }
        Person.prototype.eat=function(){
            return "eatting";
        }
        var lucy=new Person(‘lucy‘);
        var tom =new Person(‘tom‘);
        console.log(tom.eat());    //eatting
         console.log(lucy.eat()===tom.eat()); //true

上边的代码中,证明两个实例都沿用了同一个prototypesh原型链 中的eat方法,当修改原型对象的eat方法时,两个实例都发生改变,这是因为对象实例本身没有eat方法,都是读取的原型对象中的方法。所以,当实例对象本身没有这个方法时,会往他的原型对象中找,如果原型对象中没有再往上一级找,直到最顶层。如果实例中有跟原型对象中一样的方法就不会再往上找了。

所以:

原型对象的作用,就是定义所有对象实例所共享的属性和方法。

每一个构造函数都存在一个prototype属性,对于对象实例来说,prototype是对象实例的原型对象。所以prototype即是属性,又是对象。

原型链:对象的属性和方法,有可能是定义在自身,也有可能是定义在它的原型对象。由于原型对象本身对于对象实例来说也是对象,它也有自己的原型,所以形成了一条原型链(prototype chain)。比如,a对象是b对象的原型,b对象是c对象的原型,以此类推。所有一切的对象的原型顶端,都是Object.prototype,即Object构造函数的prototype属性指向的那个对象。

当实例对象读取某个属性时,先看自身有没有这个属性,如果有就不再往上找,如果没有就往他的原型对象找,如果没有就再往上一层原型对象找,知道找到,否则undefined,当实例中存在同名属性时就会优先读取自身的属性,相当于“覆盖”。

平常时我们用的数组的属性或者方法就是用原型对象上的属性或者方法,比如

var arr = [1,2,3];

console.log(arr.length);//用的是Array.prototype里边的length属性

四、constructor

prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数。

function Abc(){
    console.log(111)
}
console.log(abc.prototype.constructor===Abc)  //true

下边用一张图解释下这几着之间的关系:

每一个构造函数都存在一个prototype属性,而构造函数生产的实例对象中通过原型链指向了原型对象,原型对象中有一个construtor属性指向了构造函数。

时间: 2024-08-01 19:19:23

Javascript中prototype属性的相关文章

Javascript中prototype属性的详解

原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于‘类的’,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对

在 JavaScript 中 prototype 和 __proto__ 有什么区别

本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的地方,就是 prototype 和 __proto__ 到底是干嘛的 1. __proto__ 就是 Javascript中 所谓的原型 (这里,我们还是拿具体的例子来说明吧) function A (name) { // 这里是一个构造函数 thia.name = name } var Aobj

JavaScript中的属性操作

JavaScript中的属性操作 一. 原型链 在js中,任何一个对象都有一个prototype属性,在js中记做:_proto_. 比如,我们创建一个对象: <!-- lang: js --> var foo = { x:1, y:2 } 虽然看起来我们只为foo对象创建了两个属性,实际上,它还有一个属性_proto_,如图: 即使我们不定义_proto_,在js中也会预留一个属性. 如果我们定义一个空对象,foo <!-- lang: js --> foo = function

深入理解JavaScript中的属性和特性

深入理解JavaScript中的属性和特性? JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaScript中理解对象的本质.理解对象与类的关系.对象与引用类型的关系 对象属性如何进行分类 属性中特性的理解 第一部分:理解JavaScript中理解对象的本质.理解对象与类的关系.对象与引用类型的关系 对象的本质:ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.即

Javascript中length属性的总结

Javascript中length属性的总结 一.StringObject中的length     length属性是返回字符串的字符数目. 例如: // 普通字符串 var str = "abcdef"; console.log(str.length); // 6 // 数组 var str1 = new Array(1,2,3,4); console.log(str1.length); // 4 // 数组与字符串 var str2 = str1 + str; // "a

JavaScript中对象属性的添加和删除

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 用.为对象添加属性 用关键字delete删除属性 用[]添加属性 和.的不同 r.name==r["name"]; r.

[转] JavaScript中的属性:如何遍历属性

在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上层原型上继承一些属性.第二个原因是,JavaScript中的属性不光有值,它还有一些除了值以外的其他特性,其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true,则称这个属性是可枚举的,否则反之. 知道了这些,我们就可以把属性的遍历分为四种情况. 注:示例代码中

jQuery和javascript中event属性

javascript中event属性说明 1.altKey 描述: 检查alt键的状态. 语法: event.altKey 可能的值: 当alt键按下时,值为 TRUE ,否则为 FALSE .只读. 2.button 描述: 检查按下的鼠标键. 语法: event.button 可能的值: 0 没按键 1 按左键 2 按右键 3 按左右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键 这个属性仅用于onmousedown, onmouseup, 和 onmousemov

【jquery】javaScript中prototype的妙用 巧妙运用prototype属性原型链创建对象

prototype  可以有好多有优化实现方法 http://blog.csdn.net/liuqiwen0512/article/details/8089690 在 JavaScript 中,每个函数对象都有一个默认的属性 prototype,称为函数对象的原型成员,这个属性指向一个对象,称为函数的原型对象,当我们每定义了一个函数的时候,JavaScript 就创建了一个对应的原型对象,也就是说,当我们定义一个函数的时候,实际上得到了两个对象,一个函数对象,一个原型对象.原型对象是一个特殊的对