秒懂JS对象、构造器函数和原型对象之间的关系
2018-02-22 17:17
295 查看
![](https://www.cnblogs.com/Skins/custom/images/logo.gif)
小古哥 https://www.cnblogs.com/gulei/p/6733707.html
学习JS的过程中,想要掌握面向对象的程序设计风格,对象模型(原型和继承)是其中的重点和难点,拜读了各类经典书籍和各位前辈的技术文章,感觉都太过高深,花费了不少时间才搞明白(个人智商是硬伤/(ㄒoㄒ)/~~),这里略作总结尽量通俗易懂。一、基本概念 1、对象:属性和方法的集合,即变量和函数的封装。每个对象都有一个__proto__属性,指向这个对象的构造函数的原型对象。 2、构造器函数:用于创建对象的函数,通过new关键字生成对象。函数名一般首字母大写的。 3、原型对象:每个函数都有一个prototype属性,它是一个指向原型对象的指针(原型对象在定义函数时同时被创建) 二、创建对象的方法 1、使用构造函数和原型对象共同创建![](https://images2015.cnblogs.com/blog/599904/201704/599904-20170419151405196-1934182459.png)
function Person(name, age, job){//构造器函数 this.name = name; this.age = age; this.job = job; } Person.prototype = {//设置构造器函数prototype指定的对象,即重置原型对象 constructor : Person, sayName : function(){alert(this.name);} } var p1 = new Person("Tom", 29, "Teacher");//实例化对象p1 //{name:"Tom",age:29,job:"Teacher",__proto__:object},object即原型对象:Person.prototype指向的对象 var p2 = new Person("Jack", 27, "Doctor");//实例化对象p2 //{name:"Jack",age:27,job:"Doctor",__proto__:object}2、仅使用原型对象创建
![](https://images2015.cnblogs.com/blog/599904/201704/599904-20170421165540774-1038169586.png)
var person={ classname:'human'}//将这个对象当做原型var p1=Object.create(person)//生成实例对象console.log(p1.classname)//human,相当于p1.__proto__.classname这样表述还是感觉有些生硬,来点更形象的比喻吧~构造函数是妈,原型对象是爸,实例对象是孩子。妈让每个孩子拥有私有能力,爸让它们拥有共有能力(这个共有能力其实都是爸代劳的/(ㄒoㄒ)/~~);没有构造函数的情况下,可以直接理解为克隆哦~怎么样,这样应该能理解三者之间的关系了吧。 当然创建对象的方法远不止这两种,这里有九种创建对象方法,oh no?我只想要个对象,为什么这么复杂?为了优化代码,这个理由足够吧。
相关文章推荐
- 秒懂JS对象、构造器函数和原型对象之间的关系
- 秒懂JS对象、构造器函数和原型对象之间的关系
- 图解js原型(原型,对象,函数之间的关系)
- 关于js中,原型对象,原型链,构造函数,实例之间关系的理解与区别
- 一张图说明 函数, 实例(对象), 原型之间的关系
- [JS]JS对象的内部原型(__proto__)和构造器的原型(prototype)
- 在立即执行函数内组合使用构造函数模式和原型模式创建对象,实现模块化开发(以daterangepicker.js为例)
- 深入理解javascript原型和闭包(2)——函数和对象的关系
- 深入理解javascript原型和闭包(2)——函数和对象的关系
- 深入理解javascript原型和闭包(2)——函数和对象的关系
- 深入理解javascript原型和闭包系列 深入理解javascript原型和闭包(2)——函数和对象的关系
- 原型重写切断原型与已有对象之间的关系
- 诠释了继承类之间构造器(有参、无参)、对象初始化块和静态初始化块之间的关系及调用顺序
- 实例对象、构造函数和原型之间的关系
- 让您对js的 function, javascript内置对象,this概念及之间的关系不再迷惑
- 对js的 function.javascript内置对象,this概念及之间的关系不再迷惑
- js实例化的对象,函数和原型的相关
- 一切皆对象之两个方法概括js,无函数签名(无多态),原型,闭包,封装,引用类型,继承……
- 深入理解javascript原型和闭包(2)——函数和对象的关系
- 深入理解javascript原型和闭包(2)——函数和对象的关系