浅谈系列之 javascript原型与对象

  在我学习与使用javascript三个月中,我一直对javascript的继承关系以及prototype理解不清,导致很多时候为什么这么用说不出个所以然来。截止到本周为止,通过之前的学习以及自己的再学习,自我感觉算是对这一块有了较为清晰的认识,此文将谈谈我对javascript原型与继承的理解,在此之前,我们首先要知道一些基本的知识。

知识铺垫

  1、数据类型

  JavaScript中的数据类型在曾经我也有提到过,它包括未定义值(undefined),空值(null),布尔值(boolean),数字(number),字符串(string)以及对象(object),而对象中又包含特殊对象数组(array),并且函数也是对象。其中,字符串(string),对象(object)等都是由构造函数来实现的。讲到这里又得说说JavaScript中的函数了。

  2、函数

  就我所知的语言都是有函数这个概念的,所以我也就不再细说。在 JavaScript 中函数也是一个对象,那么对象又是通过什么来创建的呢?对象是作为现有示例(即原型)对象的副本而创建的,该名称就来自于这一概念,此原型对象的任何属性和方法都将显示为从原型的构造函数创建的对象的属性和方法。可以说,这些对象从其原型继承了属性和方法。普通的函数与构造函数在JavaScript中都是通过function来创建,不同的是构造函数需要通过大写来标明。例如:

 1 function Person(name, age, sex) {
 2     this.name = name;
 3     this.age = age;
 4     this.sex = sex;
 5     this.say = function () {
 6         console.log(‘my name is ‘ + this.name + ",I‘m " + this.age )
 7     }
 8 }
 9
10 Person.say_hello = function () {
11     console.log("Hello,I‘m" + this.sex)
12 };
13
14 Person.prototype.is_live = function () {
15     return true
16 };
17
18 var wfsovereign = new Person(‘wfsovereign‘, 21, "boy");
19
20 wfsovereign.say();  //output my name is wfsovereign,I‘m 21
21 console.log(wfsovereign.is_live());     //output true
22 console.log(wfsovereign.say_hello(),"----");    //output undefined

此例中,创建了构造函数Person,接受参数为name,age,拥有静态方法say_hello(),实例方法say()和is_live(),使用构造函数创建实例对象wfsovereign,能够调用实例放方法,调用静态方法时提示未定义。在构造函数后通过"."来添加的方法或属性,称之为静态方法或静态属性,这是实例之后的对象不能访问的。通过控制台,我们输出

1 console.log(wfsovereign.prototype);
2 console.log(wfsovereign.__proto__);
3 console.log(wfsovereign.constructor);

可以看到

 1 undefined    //wfsovereign.prototype
 2
 3 Person {is_live: function}    //wfsovereign.__proto__)
 4 constructor: function Person(name, age, sex) {
 5 is_live: function () {
 6 __proto__: Object
 7
 8 function Person(name, age, sex) {   //wfsovereign.constructor
 9     this.name = name;
10     this.age = age;
11     this.sex = sex;
12     this.say = function () {
13         console.log(‘my name is ‘ + this.name + ",I‘m " + this.age )
14     }
15 }

  可以看到,实例对象wfsovereign没有prototype属性,但是有了指向构造函数Person.prototype的__proto__属性以及指向构造函数的constructor属性,而Person这一构造函数也有指向object的__proto__属性,说明Person也是通过object创建的一个实例。

  由此,我们得出,创建的每一个函数都有prototype属性,这是一个指针,它指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。prototype就是通过调用构造函数而创建的那个对象实例的原型对象。只有函数才能访问得到prototype属性,实例的对象没有该属性,即这里用Person创建的实例wfsovereign是没有prototype这一属性的。当使用构造函数(Person)创建一个实例(wfsovereign)的时候,实例内部将包含一个内部指针(__proto__)指向构造函数的prototype,这个连接存在于实例和构造函数的prototype之间,而不是实例与构造函数之间,实例与构造函数之间通过constructor连接。知道了prototype是什么和怎么来的之后,我们再来看JavaScript的原型链就容易多了。

继承与原型链

  1、原型链的理解

  JavaScript 不包含传统的类继承模型,而是使用 prototype 原型模型。在JavaScript中,一共有两种类型的值,原始值和对象值。每个对象都有一个内部属性 prototype ,我们通常称之为原型。原型的值可以是一个对象,也可以是null。如果它的值是一个对象,则这个对象也一定有自己的原型。当从一个对象那里调取属性或方法时,如果该对象自身不存在这样的属性或方法,就会自己去关联的prototype对象那里寻找,如果prototype没有,就会去关联的创造者那里找,直到prototype为undefined为止,Object的prototype就是undefined即所有原型都终止于 Object.prototype,这样就形成了一条线性的链,我们称之为原型链。JavaScript正是通过原型链来调用关联创造者的属性与方法的。

  2、使用原型的好处

  可以让对象实例共享它所包含的属性和方法。也就是说,不必在构造函数中添加定义对象信息,而是可以直接将这些信息添加到原型中,通过指针引用的方式来调用。使用构造函数的主要问题就是每个方法都要在每个实例中创建一遍。

  

ps:本文内容若是有误或者迷糊,还请指正或指出。

时间: 2024-10-08 19:35:13

浅谈系列之 javascript原型与对象的相关文章

Core Data浅谈系列之十 : 关于数据模型中实体的属性

之前写了<Core Data浅谈系列汇总>,今天稍微回顾了下,做些补充. 在这个系列的第一篇<基础结构>中(2013年1月份的文章,时间过得好快啊!),有简单带过Entity的Attribute: 数据类型.布尔值统一用NSNumber来表示: 字符串类型用NSString表示: 时间类型用NSDate表示: 二进制数据类型用NSData表示: 非标准类型用Transformable来表示: 而Attribute还有其自身的Properties,比如Transient表示不用持久化

浅谈JS中的原型对象和原型链

我们知道原型是一个对象,其他对象可以用它实现属性继承,除了prototype,又有__proto__ 1. prototype和__proto__的区别 prototype是函数才有的属性                                     __proto__是每个对象都有的属性 但是__proto__不是一个规范的属性,只是部分浏览器 实现了此属性,对应标准的属性是[[Prototype]] 2. __proto__属性指向谁? __proto__的指向取决于对象创建时的实

浅谈模块化的JavaScript

模块化JavaScript之风早已席卷而来, CommonJS . AMD . NodeJS .RequireJS . SeaJS . curljs  等模块化的JavaScript概念及库扑面而来,不得不承认,对于前端JavaScript代码的组织编写是一次伟大的变革.本文主要参考snandy 的有关 modular js 系列文章,对SeaJS和RequireJS做一个系统的深入分析及对比. 一.我们为什么要用模块化的JavaScript 相信大家也都经历了“过程式的JavaScript”.

浅谈 ECMAScript 和 JavaScript

ES5与ES3基本保持兼容,较大的语法修正和新功能加入,将由JavaScript.next完成. 什么是ECMAScript?http://baike.baidu.com/link?url=G1T8nGWaC0r3o-TDiDXZhgt75zEHYrG6TLxRfFjJvxpxNZHgy0Hk1Dz0RSsymSl-25oE0uUba81B7JSBc5Cw0a ECMAScript 5.1 浏览器支持Opera 11.60Internet Explorer 9+Firefox 4Safari 5

浅谈 c++/java/javascript 之传参

本文主要梳理了几种语言的传参机制,即关于 传值.传引用 之争 最近开始学node.js搭后端服务器时,碰到这样一句话 java只有一种传参机制就是传值 javascript其大部分语法规范取自于JAVA语法规范, 那么这种句话也适用于它,于是也有  javascript只有一种传参机制就是传值 为了理解这句话,我从个人感觉较为接近底层的语言c++写一些测试,代码如下 #include<iostream> using namespace std; class Test { public: int

JavaScript 原型和对象创建底层原理

1. prototype/__proto__/constructor JS原型链和继承网上已经烂大街了,5毛可以买一堆,这里只提一下: constructor:普通对象和函数对象都有,指向创建它的函数 prototype: 函数对象才有,指向构造函数的原型对象(另一个普通对象) __proto__: 普通对象和函数对象都有,指向创建它的构造函数的原型对象 function Fun1(){}; Fun1.prototype.constructor == Fun1 //true var f2 = n

浅谈Java中的类与对象

面向对象基本概念:封装.继承.多态 封装:就是把数据和行为结合在一起形成统一的整体,并对对象使用者隐藏数据的实现过程. 继承:Java继承是使用已存在的类的定义作为基础建立新类的技术,继承避免了对一般类和特殊类之间共同特征进行的重复描述. 多态:多态指同一个实体同时具有多种形式. Java作为一种面向对象语言.支持以下基本概念: 多态 继承 封装 抽象 类 对象 实例 方法 消息解析 1. 什么是类? 答:类是客观存在的,抽象的,概念的东西. 2. 什么是对象? 答:对象是具体的,实际的,代表一

浅谈ASP.net中的DataSet对象

在我们对数据库进行操作的时候,总是先把数据从数据库取出来,然后放到一个"容器"中,再通过这个"容器"取出数据显示在前台,而充当这种容器的角色中当属DataSet是最为普遍和重要的了,可以说DataSet在数据库和前台中起到了一个桥梁的作用. 下面就来谈谈DataSet的用法.(DataSet对象本身是没有存取数据库的能力的,它要与DataAdapter一般是配合使用的,而关于DataAdapter的用法在我的另一篇文章中有介绍,大家可以看一下) DataSet可以包

安卓开发_浅谈Fragment之事务添加Fragment对象

我们都知道给一个activity动态添加fragment的时候 有下面几种添加方式 看一下布局文件 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android: