博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
面向对象精要-构造函数和原型对象
阅读量:5108 次
发布时间:2019-06-13

本文共 2832 字,大约阅读时间需要 9 分钟。

1、构造函数

function Person() {        }

构造函数-----首字母大写

1.1、实例化对象

function Person() {    }var person1 = new Person()

1.2、检测对象类型

instanceof  方法

function Person() {}var person1 = new Person();console.log(person1 instanceof Person);/*true*/

constructor  方法

function Person() {}var person1 = new Person();console.log(person1.constructor === Person);/*true*/

建议使用instanceof检测对象类型,因为构造函数属性可以被覆盖,并不一定完全准确。

2、原型对象

原型对象好比对象的基类。

几乎所有的函数都有一个名为prototype的属性,该属性数一个原型对象用来创建新的对象实例。

2.1、[[Prototype]]属性

实例对象的内部属性,跟踪到原型对象。

指向该实例使用的原型对象的一个指针。

读取方法:

Object.getPrototypeOf()

function Person() {}var person1 = new Person();var prototype = Object.getPrototypeOf(person1);console.log(prototype === Person.prototype)/*true*/

大部分引擎在所有对象上都支持一个名为__proto__的属性。该属性可以直接读写[[Prototype]]属性。

2.2、在构造函数中使用原型对象

function Person(name) {    this.name = name;}Person.prototype.sayName = function () {    console.log(this.name)};var person1 = new Person("Qian");var person2 = new Person("Wei");person1.sayName();                   //Qianperson2.sayName();                   //Wei

sayName()现在是一个原型属性而不是自有属性

添加多个属性,简洁的方法

function Person(name) {    this.name = name;}Person.prototype = {    sayName:function () {        console.log(this.name)    },    toString:function () {        return "[Person "+this.name+"]"    }};var person1 = new Person("Qian");person1.sayName();/*Qian*/console.log(person1.toString());/*[Person Qian]*/

副作用

function Person(name) {    this.name = name;}Person.prototype = {    sayName:function () {        console.log(this.name)    },    toString:function () {        return "[Person "+this.name+"]"    }};var person1 = new Person("Qian");person1.sayName();/*Qian*/console.log(person1.toString());/*[Person Qian]*/console.log(person1 instanceof Person);/*true*/console.log(person1.constructor === Person);/*false*/console.log(person1.constructor === Object);/*true*/

使用对象字面量形式改写原型对象改变了构造函数的属性,因此他现在指向Object而不是Person。

原因:原型对象具有一个constructor属性,这是其他对象实例所没有的,当一个函数被创建时,它的prototype属性也被创建,且该原型对象的constructor属性指向该函数。当使用对象字面形式改写原型对象的Person.prototype时,其constructor属性将被置为泛用对象Object()。

解决办法:需要在改写原型对象时手动重置为constructor属性

function Person(name) {    this.name = name;}Person.prototype = {    constructor:Person,        sayName:function () {        console.log(this.name)    },    toString:function () {        return "[Person "+this.name+"]"    }};var person1 = new Person("Qian");person1.sayName();/*Qian*/console.log(person1.toString());/*[Person Qian]*/console.log(person1 instanceof Person);/*true*/console.log(person1.constructor === Person);/*true*/console.log(person1.constructor === Object);/*false*/

2.3、内建对象的原型对象

Array.prototype.sum = function () {    return this.reduce(function (pre,cur) {        return pre+cur;    });};var number = [1,2,3,4,5];console.log(number.sum())/*15*/

在Array.prototype上创建一个名为sum()方法。

转载于:https://www.cnblogs.com/QianBoy/p/8878002.html

你可能感兴趣的文章
Java内存区域与内存溢出异常---对象的内存布局和对象的访问定位
查看>>
【转载】Android 的 Handler 机制实现原理分析
查看>>
scanf函数
查看>>
HTML5——新表单元素 表单属性 语义元素
查看>>
CSS3—— 分页 框大小 弹性盒子 多媒体查询 多媒体查询实例
查看>>
使用反射获取Android中隐藏的方法
查看>>
【原创】Leetcode -- Reverse Linked List II -- 代码随笔(备忘)
查看>>
人脸识别技术开发人证比对访客系统
查看>>
Android之人脸识别
查看>>
HDU 5340——Three Palindromes——————【manacher处理回文串】
查看>>
二叉树的下一个节点
查看>>
Nginx配置文件详细说明
查看>>
遇到的Mysql的一个坑
查看>>
AC日记——「HNOI2017」单旋 LiBreOJ 2018
查看>>
vue总结
查看>>
真机调试的准备工作介绍
查看>>
(笔记)Linux内核学习(十一)之I/O层和I/O调度机制
查看>>
[lintcode medium] Delete digits
查看>>
3.29下午
查看>>
macOS升级到high Sierra后, Cocoapods不能使用解决办法
查看>>