关闭

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

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

学习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  

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1770

关闭

Js判断对象和数组

在调用后端接口时,由于后端接口的不规范统一,接口最外层在没有数据时返回的是空数组(其实更想要的是空json对象,接口返回的data数据应该统一返回json对象,便于扩展),而在有数据时返回的是json对象

js Date对象

Date对象对日期和时间进行存储和计算;获取当前的系统时间new Date();返回值就是当前系统时间 ;new Date(1000*60*60*24),返回值是距离计算机元年对应的日期时间;获取Date中的日期时间

浅谈JS包装对象

对象是 JavaScript 语言最主要的数据类型,三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象(wrapper)。

深入理解js对象中数据属性和访问器属性

创建对象的方式有两种:第一种,通过new操作符后面跟Object构造函数,第二种,对象字面量方式。两种方式创建出来的对象是一样的,有相同的属性和方法。这些属性内部都有描述其行为的属性描述符。

js是面向对象还是基于对象_js面向对象的代码体现

javascript是面向对象的,还是面向过程的?基于对象是什么意思?对象: 指的是对某一类事物进行抽象,抽象出这一类事物共同的特征以及行为,也就是属性和方法

JS声明对象时属性名加引号与不加引号的问题

JS声明对象时属性名加引号与不加引号的问题,一般情况下属性名加引号和不加引号是都可以的,效果是一样的。如果属性名是数字,则必须用“”包围,并且用 [] 方括号访问。

比较 JavaScript 对象的四种方式

比较 JavaScript 中的原始值非常简单。只需使用任何一种可用的相等运算符即可,例如严格相等运算符:但是对象却有结构化数据,所以比较起来比较困难。

js中的Arguments对象

arguments 是一个对应于传递给函数的参数的类数组对象。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引0处

ES6中类和对象的注意问题

在ES中类没有变量的提升,所以必须先定义类,才能通过实例化对象,类里面的共有属性和方法一定要加this使用,类里面的this使用问题:

用 global This访问全局对象

JavaScript 语言越来越被广泛地用于各种环境中。除了 Web 浏览器(这是 JavaScript 的最常见的宿主环境类型)之外,你还可以在服务器,智能手机甚至机器人硬件中运行 JavaScript 程序。

点击更多...

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