原型的概念以及为什么使用原型
原型
js 的对象比较
由于 js 是解释执行的语言, 那么再代码中出现函数与对象如果重复执行, 会创建多个副本
- 在代码中重复执行的代码容易出现重复的对象
- 创建一个 Student 构造函数, 以创建 对象. 要求有 name, age, gender 和 sayHi
- 代码中会出现的错误
// 1function Student() { var o = {}; o.name = ... return o; } // 2 function Student () { name: .... age: .... ... }
- 传统的构造方法的定义方式会影响性能, 容易造成多个对象有多个方法副本. 应该讲方法单独抽取出来. 让所有的对象共享该方法.
- 可以考虑将方法全部放到外面但是有安全隐患
- 在开发中会引入各种框架或库. 自定义的成员越多, 出现命名冲突的几率越大
- 可能在开发中会有多个构造函数. 每一个构造函数应该有多个方法. 那么就会变得不容易维护.
- 任意一个对象都会默认的链接到它的原型中
- 创建一个函数. 会附带的创建一个特殊的对象. 该对象使用 函数.prototype 引用. 称其为函数的原型属性.
- 每一个由该函数作为构造函数创建的对象, 都会默认的连接到该对象上.
- 在该对象访问某一个方法或属性的时候, 如果该对象中没有, 就会到这个神秘对象中去查找.
传统构造函数的问题
function fuc() { this.sayHi = function () { } }
- 由于对象是调用
new fuc()
所创建出来的. 因此每一个对象在创建的时候, 函数 sayHi 都会被创建一次 - 那么每一个对象都含有一个独立的, 不同的, 但是功能逻辑一样的函数. 比如:
{} == {}
- 在代码中方法就会消耗性能. 最典型的资源就是内存.
- 这里最好的办法就是将函数体放在构造函数之外. 那么在构造函数中只需要引用该函数即可
function sayHi () {} function fuc () { this.say = sayHi; }
- 会在开发中变得困难: 引入框架危险, 代码繁冗不好维护. 解决办法就是外面的函数如果不占用名字. 而且在函数旗下就好了.
- 每一个函数在定义的时候, 有一个神秘对象被创建出来.
- 每一个由构造函数创建的对象都会默认的连接到该神秘对象上.
var f1 = new fuc();var f2 = new fuc(); f1.sayHi(); // 如果 f1 没有 sayHi, 那么就会在 fuc.prototype 中去找 f2.sayGoodBye(); // 如果 f2 没有改方法, 那么就会在 fuc.prototype 中去找
- 由构造函数创建出来的众多对象共享一个对象, 就是 构造函数.prototype
只需要将共享的东西, 重复会多占用内存的东西放到 构造函数.prototype 中, 那么所有的对象就可以共享了.
function fuc() {} fuc.prototype.sayHi = function () { console.log( ... ); }; var f1 = new fuc(); f1.sayHi(); var f2 = new fuc(); f2.sayHi(); f1.sayHi === f2.sayHi
- 举例: 写一个构造函数 Student, 要求有 name, age, gender, sayHi, study. 要求构造函数带参数.
常见错误
- 写 构造函数.prototype 的时候, 将属性也加到里面.
function Student() {} Student.prototype.name = '胡歌'; var p = new Student();
赋值的错误
function Student() {} Student.prototype.name = '胡歌'; var p1 = new Student(); var p2 = new Student(); p1.name = '霍建华'; console.log( p1.name ); console.log( p2.name ); // 如果是访问数据, 当前对象中如果没有该数据就到构造函数的原型属性中去找 // 如果是写数据, 当对象中有该数据的时候, 就是修改值; 如果对象没有该数据, 那么就添加值
原型的相关概念
- 关于面向对象的概念
- 类 class: 在 js 中就是构造函数
- 在传统的面向对象语言中, 使用一个叫做类的东西定义模板. 然后使用模板创建对象.
- 在构造方法中也具有类似的功能. 因此称其为类
// 在 java 中, 最小的代码单位是 类 class Program { // 成员 }
- 实例 ( instance ) 与对象 ( object )
- 实例一般是指某一个构造函数创建出来的对象. 我们成为 xxx 构造函数的实例
- 实例就是对象. 对象是一个泛称.
- 实例与对象是一个近义词
- 键值对与属性和方法
- 在 js 中键值对的集合称为对象
- 如果值为数据( 非函数 ), 就称该键值对为属性 property
- 如果值为函数( 方法 ), 就称该键值对为方法 method
- 父类与子类
- 传统的面向对象语言中使用类来实现继承. 那么就有父类, 子类的概念
- 父类又称为基类, 子类又称为派生类
- 在 js 中常常称为父对象, 子对象. 基对象, 派生对象.
- 类 class: 在 js 中就是构造函数
- 原型相关的概念
- 神秘对象针对构造函数称为 "原型属性"
- 神秘对象就是构造函数的原型属性
- 简称原型
- 神秘对象与构造函数所创建出来的对象也有一定关系
- 关系是什么
- 神秘对象针对构造函数创建出来的对象称为 "原型对象"
- 简称原型
- 对象继承自其原型
- 构造函数创建的对象 继承自 构造函数的原型属性
- 构造函数创建的对象 继承自 该对象的原型对象
- 构造函数所创建出来的对象与构造函数的原型属性表示的对象是两个不同的对象
- 原型中的成员, 可以直接被实例对象所使用
- 也就是说实例对象直接 "含有" 原型中的成员
- 因此 实例对象 继承自 原型
- 这样的继承就是 "原型继承"
- 神秘对象针对构造函数称为 "原型属性"
- 一些问题
- {} 构造函数是什么?
- 凡是字面量的对象都有构造函数
- {} Object
- [] Array
- /./ RegExp
- function ... Function
如何使用原型
为什么使用原型?
- 利用对象的动态特性
- 构造函数.prototype.XXX = vvvv;
- 利用直接替换
Student.prototype = {sayHello: function () {},study: function () {} };
转载于:https://www.cnblogs.com/brightking/p/5724792.html
原型的概念以及为什么使用原型相关推荐
- 【设计模式】原型模式 ( 概念简介 | 使用场景 | 优缺点 | 基本用法 )
文章目录 I . 原型模式 概念简介 II . 原型模式 使用场景 III . 原型模式 优缺点 IV . 原型模式 实现及 简单示例 I . 原型模式 概念简介 原型模式 : 用原型实例指定创建对象 ...
- 如何更加简单的理解JS中的原型原型链概念
前面写了很多关于前端经验之谈,今天就来点干货吧.这篇文章将会介绍原型这个概念 原型是整个Javascript中比较重要的概念,如果面向对象想要学好,那么这个东西你必须要了解,不然后面的原型链,继承,多 ...
- hualinux 编程概念 3.11 快速原型模型:以最快最小代价完成产品特性
目录 一.前言 二.快速原型介绍 2.1 快速原型概念 2.2 理解例子 2.3 原型种类 2.3.1 低保原型设计:使用线框图 2.3.2 中保原型图 2.3.3 高保真原型图 2.3.4 低中高保 ...
- java原型链_深入总结Javascript原型及原型链
本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 我们创建的每个函数都有一个 prot ...
- 的原型是什么_学习服装原型是什么?
招福 鹿仔的形象代言猫 麻麻说了,除提问外,大家不需要给文章打赏! 将本公众号 " 设为星标 " 就不会错过更新啦! 我会督促麻麻多给大家分享一些干货的!Meow~ 在中提到的原型 ...
- 真丶深入理解 JavaScript 原型和原型链(二):原型和原型链
原文地址: https://www.jeremyjone.com/745/,转载请注明. 上一篇文章已经总结了关于原型的两个属性,那么接下来所有原型和原型链,乃至后面的继承,都与这两个属性有关系. 原 ...
- 一张图看透JavaScript原型关系:__proto__(对象原型)和prototype(函数原型)
问:函数岂不是拥有两个原型? 答:是的,函数有两个原型proto和prototype. 因为函数是对象,而对象就有原型,其原型就是proto.函数是Function的实例,所以此原型就是Functio ...
- JS 原型链 prototypt 和隐式原型 _proto_
prototype(原型) : 对象的一个属性,此属性使您有能力向对象添加属性和方法,当访问对象不存在属性是会自动到 prototype 中找 _proto_(隐式原型): 此对象构造函数(类)的原 ...
- 原型的指向是否可以改变 原型最终指向了哪里 原型指向改变如何添加方法和访问
原型的指向是否可以改变 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
最新文章
- TVM 各个模块总体架构
- windows下硬盘安装mint10
- 新东家要哭了,雅虎终于承认上亿用户数据被盗
- Django MTV结构分析
- 25 类:接口 抽象父类 多态 鸭子类型 格式化方法与析构方法 反射 异常处理 自定义异常 断言...
- δ在web里面怎么输入_【高等数学】用ε-δ语言证明函数极限
- 建立表/索引时的 存储参数:【PCTUSED参数与PCTFREE参数】
- Nginx使用upstream实现动静分离
- 一个比较简单驱动程序初学者可以看看
- VMware Horizon View 的内部版本号和版本 (2143853)
- 80后营销人如何为理想插上丰满“羽翼”?
- 【论文写作】综述论文的六个写作模版
- 简述导线平差计算的五个步骤_结点导线如何平差
- win10屡次自动打开系统代理服务器的解决办法
- 【读书】格鲁夫给经理人的第一课-管理杠杆率
- 基于51单片机的电子钟万年历LCD1602显示
- 建筑企业资质分立风险
- NFT 制作生成进阶:男女性别区分+特殊款形象/头像完整项目
- 堰流实验报告思考题_水力学的实验报告2篇
- 直播提醒 | 零基础深度学习极速入门课程重磅开营
热门文章
- JS判断某年某月有多少天
- 用来读的词典:牛津当代百科大辞典(英汉·英英·彩色·图解)
- Python全栈(十)Django框架之10.ORM模型对象和QuerySet方法
- GitHub 又一可视化低代码神器,诞生了!速度!手慢无!
- 计算机系的对联,首个计算机对联系统问世
- ubuntu 网络连接图标灰色处理
- 求一份很早的MUD文字游戏,海洋2或者海洋3的代码
- 推流用本地地址收报错,http://127.0.0.1:1935/live/test:connection refused
- 黑帽SEO之搜索引擎劫持
- 中国全自动洗地机器行业现状调研及趋势分析报告