秒懂JS对象、构造器函数和原型对象之间的关系

时间: 2019-01-04阅读: 87标签: 对象

学习JS的过程中,想要掌握面向对象的程序设计风格,对象模型(原型和继承)是其中的重点和难点,拜读了各类经典书籍和各位前辈的技术文章,感觉都太过高深,花费了不少时间才搞明白(个人智商是硬伤/(ㄒoㄒ)/~~),这里略作总结尽量通俗易懂。


一、基本概念

  1、对象:属性和方法的集合,即变量和函数的封装。每个对象都有一个__proto__属性,指向这个对象的构造函数的原型对象

  2、构造器函数:用于创建对象的函数,通过new关键字生成对象。函数名一般首字母大写的。

  3、原型对象:每个函数都有一个prototype属性,它是一个指向原型对象的指针(原型对象在定义函数时同时被创建)

 

二、创建对象的方法

  1、使用构造函数和原型对象共同创建


如上图,构造器函数Person(),通过new关键字创建了两个实例化对象p1、p2,这两个新对象都继承了,构造器Person()函数prototype属性所指向的原型对象。通过构造函数创建实例对象p1和p2的时候,其中name、age、job这些是通过构造函数生成的(本地部分),sayName方法是通过继承原型对象来实现共享的(远程部分),这样多个实例对象都是由本地(私有)和远程(共享)两部分组成。还是不清楚,没关系我们上代码。

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、仅使用原型对象创建


如上图,使用Object.create方法从原型对象直接生成新的实例对象,新对象p1继承原型对象的属性和方法,但是这里没有用到构造函数

var person={ classname:‘human‘}//将这个对象当做原型
var p1=Object.create(person)//生成实例对象
console.log(p1.classname)//human,相当于p1.__proto__.classname

这样表述还是感觉有些生硬,来点更形象的比喻吧~

构造函数是妈,原型对象是爸,实例对象是孩子。妈让每个孩子拥有私有能力,爸让它们拥有共有能力(这个共有能力其实都是爸代劳的/(ㄒoㄒ)/~~);没有构造函数的情况下,可以直接理解为克隆哦~怎么样,这样应该能理解三者之间的关系了吧。


地址:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10218478.html  

FormData对象的使用

FormData类型是XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。 作用:1.利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的name和value组装成一个queryString;2.异步上传二进制文件。

js中Object.create vs new Function() 的区别

之前学习JavaScript 权威指南,说以后在JavaScript建立对象请使用Object.create() 尽量少使用 new Function() .这两个新建对象的方法到底有什么不同呢?new 方式实现方式,实际上是先新建了一个Object对象,再用这个对象继承至Base,最后再绑定this.

js中new的本质

用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步: 第一步是建立一个新对象; 第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象; 第三步就是将该对象作为this参数调用构造函数,完成成员设置等初始化工作。

javascript Es5面向对象和 Es6面向对象

javascript es6之前的面向对象方法:一般使用构造函数来实现。通过ES6的class 类来创建结果和上面用构造函数创建的是一样的;当然里面也可以写方法 function;用构造函数本身 直接点 ▪ 上的 属性或者 function() 函数 叫静态属性或方法; 一般不会这样做;

js之global 全局对象 方法

global 作为js的全局对象,但其是无法直接访问的,但是在浏览器中浏览器是将这个对象当做是window对象的一部分,即Date 等Global的属性使用window.Date 可访问到

js中arguments对象_理解arguments参数

在js中万物皆对象,甚至数组字符串函数都是对象。所以这个叫做arguments的东西也是个对象,而且是一个特殊的对象,它的属性名是按照传入参数的序列来的,第1个参数的属性名是0,第2个参数的属性名是1,以此类推,并且它还有length属性,

Javascript的对象拷贝

Javascript中对象拷贝的多种方式,以及探究一下深拷贝和浅拷贝。在开始之前,我先提一下一些基础知识:Javascript 的对象只是指向内存中某个位置的指针。这些指针是可变的,也就是说,它们可以重新被赋值。因此,单单复制这个指针的结果是,有两个指针指向内存中的同一块地址。

js基础_究竟什么是变量对象,什么是活动对象?

在写程序的时候会定义很多变量和函数,那js解析器是如何找到这些变量和函数的?变量对象是与执行上下文对应的概念,在执行上下文的创建阶段,它依次存储着在上下文中定义的以下内容:函数的所有形参、所有函数声明、所有变量声明

js包装对象

对象是 JavaScript 语言最主要的数据类型,三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的包装对象。所谓包装对象,就是分别与数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象。

location.hash属性#_window.location.hash 使用

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分),#是用来指导浏览器动作的,都会被浏览器解读为位置标识符 , 这意味着这些字符都不会被发送到服务器端。对服务器端完全无用。所以,HTTP请求中不包括#。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯