如何通过实例分析深入理解JavaScript对象与原型原型用法？

本文共计1235个文字，预计阅读时间需要5分钟。

JavaScript 对象与原型用法简介：

在JavaScript中，对象是基本的数据结构，用于存储和操作数据。对象与原型（prototype）紧密相关，它们共同构成了JavaScript的类继承机制。

1. 对象创建： - 使用字面量：`var obj={ key: value };` - 使用构造函数：`function MyClass() { this.key=value; } var obj=new MyClass();`

2. 原型（Prototype）： - 每个函数都有一个原型属性，该属性是一个对象，通常用来存储所有实例共享的属性和方法。 - 当访问一个对象的属性时，如果该属性不存在于对象本身，JavaScript引擎会自动查找该属性是否存在于对象的原型上。

3. 原型链： - 当访问一个对象的属性或方法时，如果该属性或方法在对象的原型上存在，则直接使用该属性或方法。 - 如果原型上也不存在，JavaScript引擎会继续向上查找，直到找到或到达`Object.prototype`。

4. 修改原型： - 可以直接修改函数的原型，这将影响所有使用该构造函数创建的对象。 - `MyClass.prototype.newMethod=function() { ... };`

5. 实例与原型关系： - 每个对象都有一个`__proto__`属性，该属性指向其构造函数的原型。 - 通过`Object.getPrototypeOf()`可以获取一个对象的原型。

举例说明：

在JavaScript程序开发中，我们经常需要创建多个具有相似属性和方法的对象。例如，创建多个学生对象，每个学生对象都有姓名和年龄属性，以及一个打印信息的方法。

javascriptfunction Student(name, age) { this.name=name; this.age=age;}

Student.prototype.sayHello=function() { console.log(Hello, my name is + this.name + and I am + this.age + years old.);};

var student1=new Student(Alice, 20);var student2=new Student(Bob, 22);

student1.sayHello(); // 输出: Hello, my name is Alice and I am 20 years old.student2.sayHello(); // 输出: Hello, my name is Bob and I am 22 years old.

在这个例子中，`Student`是一个构造函数，它通过原型`prototype`定义了`sayHello`方法，这样所有通过`new Student()`创建的对象都可以访问这个方法。

本文实例讲述了javascript 对象 与 prototype 原型用法。分享给大家供大家参考，具体如下：

我们做程序开发的，经常面对的就是一个一个对象。那么在javascript中我们怎么去创建一个类以及一个对象呢？

<script type="text/javascript"> //创建一个Test对象 function Test(){ } var test = new Test(); //创建一个对象 var obj = new Object(); //json 对象 var json1 = {}; </script>

类都有自己的属性和方法，我们怎么去定义

<script type="text/javascript"> function Test(){ this.name = "谭勇"; this.age = 22; this.getName = function(){ return this.name; } this.getAge = function(){ return this.age; } } var test = new Test(); console.log(test); //查看一下日志 var obj = new Object(); obj.name = "谭勇"; obj.age = "22"; obj.getName = function(){ return this.name; }; obj.getAge = function(){ return this.age; }; console.log(obj); //查看下日志 var json1 = {}; json1["name"] = "谭勇"; json1["age"] = 22; json1["getName"] = function(){ return this.name; } json1["getAge"] = function(){ return this.age; } console.log(json1); //查看下日志 </script>

构造方法

<script type="text/javascript"> function Test2(name,age){ this.name = name; this.age = age; this.getName = function(){ return this.name; } this.getAge = function(){ return this.age; } } var test2 = new Test2("谭勇",22); console.log(test2); //查看下日志 </script>

行为有形参

<script type="text/javascript"> function Test3(){ this.demo = function(param_str){ return param_str; } } var test3 = new Test3(); console.log(test3.demo("aaaaaaaaaaaaaaaaaaaa")); </script>

继承

<script type="text/javascript"> function parent(){ this.getStr = function(){ return "test str"; } } function son(){} son.prototype = new parent(); var sona = new son(); console.log(sona.getStr()); </script>

拷贝继承

<script type="text/javascript"> function extend(Child, Parent) { 　　　　var p = Parent.prototype; 　　　　var c = Child.prototype; 　　　　for (var i in p) { 　　　　　　c[i] = p[i]; 　　　　} } function parent(){ } parent.prototype.getStr=function(){ return "test str"; } function son(){ } extend(son,parent); var sona = new son(); console.log(sona.getStr()); </script>

原型

原型是一个对象，其他对象可以通过它实现属性继承。
任何一个对象都可以成为原型么？

是

哪些对象有原型

所有的对象在默认的情况下都有一个原型，因为原型本身也是对象，所以每个原型自身又有一个原型(只有一种例外，默认的对象原型在原型链的顶端。)

<script type="text/javacript"> var str = "谭勇"; String.prototype.getName = function(){ var strs = ""; for(var i=0;i<this.length;i++){ strs += this[i]; } return strs; } console.log(str.getName()); console.log(str); console.log(str[0]); </script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。