面向对象笔记2 原型链 解释
面向对象2
## js中已经写好的构造函数
* 内置对象
* js提供的已经定义好的对象
* Array,Date,RegExp,String,Number,Boolean
* 同时js定义好了对应的一些构造函数
* * 字符串,数字等基础类型数据是没有属性和方法的。
* ??那么我们平时创建了一个字符串(非字符串对象)的时候,为什么可以调用他length,indexOf等属性或方法??
* 上面问题的答案就是:包装对象
* * 包装对象
* 当我们去调用字符串,数字,布尔值这三种基础数据类型的属性和方法的时候,他们本身是不具备属性和方法的,
但是js内部,会自动的去调用他们对象的构造函数,然后把他们的值作为参数进行传入,然后执行对应属性或方法,并把结果进行返回
* 包装对象一共有三个: * String,Number,Boolean
函数原型链
## 个人对函数原型链的理解
**注意__proto__这个对象在每个对象中都存在
而通过 new object()创造的对象的__proto__是没有prototype的 为构造函数的最顶层。
首先确定一个函数为构造函数 如 function construction(){ 在构造函数创建时会创建一个空对象{},函数中的this 指向该空对象 输出的值也为该空对象
同时构造函数中也有一个prototype对象该对象是由 var prototype=new object() ;
生成的 所以 object 为prototype的构造函数 } 通过 var fn = new construction();来调用(所谓构造函数和一般函数的区别就是用new来调用)
那么此时的fn就为构造函数输出的this对象指向的对象 fn.x(通过fn.x来调用x方法)判断呢this对象中是否有x 若没有则查看this对象中的__proto__对象中是否有这个方法
而this中的__proto__指向的是构造函数中的prototype这个对象查看prototype中是否存在这个方法 若没有查看prototype对象中的__proto__是否存在
而构造函数中的prototype的__proto__指向的是创造prototype这个对象的js自己封装的object()这个函数中的prototype
再在其中寻找是否存在x方法若没有在其中的__proto__中寻找 若没有就返回underfined;
与原型链有关的一些方法
hasOwnProperty() * 判断某个属性(方法)是否是某个对象自有的,就是非原型链上的 constructor
* 属性:返回某个对象的构造函数 instanceof
* 运算符 * 判断一个对象是否是某个构造函数的实例化对象 返回布尔值。
面向对象的继承
我们先创建了一个构造函数,可以应用于某些元素 但我们有其他元素的应用需要在之前的构造函数上进行添加那么我们就要用到继承列
function Drag(element){//为原构造函数 }
function DragLimit(element) {//需要在原构造函数上进行添加的新构造函数
// 调用Drag函数,并把Drag中this指向DragLimit的this Drag.call(this, element);
//改变this指向 让Drag函数中的this指向改变指向当前 for (var property in Drag.prototype) {在通过for in 赋值来 让DragLimit()中的
内容等于Drag中内容 console.log(property);
// forin不只是会把Drag.prototype自身的属性循环出来,还会把一些原型链上的属性和方法也循环
出来 if (Drag.prototype.hasOwnProperty(property)) { DragLimit.prototype[property] = Drag.prototype[property]; } };
为什么不通过赋值DragLimit.prototype = Drag.prototype;来做呢 因为在object类型中(数组 对象)若通过赋值 那么你改变赋值的对象中的内容
原对象的内容也会被改变。 为什么呢,解释。 当我们在js中通过var申请并赋值时 我们会在内存中申请一个位置来存放 我们的var 的东西 如var a=1;
但这个a所记录的是1这个值在内存中存放的位置。 当我们通过var a=[1,2,3]时在内存中申请一个位置存放的是数组中的1这个值所在的位置,而[]
中这些内容被存放在内存中的另一个地方存放1的位置中同时也记录了[]中2存放的位置依次类推。 当我们通过varb=a 让b=a这个数组内容时 只不过是让b记录
a所记录的是1这个值在内存中存放的位置 并不是新开辟一个地方在存放一组数组,所以b所使用的仍然是a中的数组的所以当b数组进行修改时修改的是a中存放
的这个内容 所以a也会发生改变。
转载于:https://www.cnblogs.com/YinWeiBlog/p/7426076.html
面向对象笔记2 原型链 解释相关推荐
- JavaScript的面向对象原理之原型链
二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...
- javascript 面向对象 new 关键字 原型链 构造函数
JavaScript面向对象 JavaScript 语言使用构造函数(constructor)作为对象的模板.所谓"构造函数",就是专门用来生成实例对象的函数.它就是对象的模板,描 ...
- JS 面向对象编程、原型链、原型继承(个人学习总结)
一.面向对象 1. 面向对象 是所有语言 都有的一种编程思想,组织代码的一种形式 基于对象的语言:JS语言 面向对象的语言:c++ java c# 2. 面向对象 3大特征 封装:将重用代码封装到函数 ...
- 《javascript高级程序设计》笔记:原型图解
文章直接从原型图解开始的,如果对一些概念不太清除,可以结合后面几节查看 1. 图解原型链 1.1 "铁三角关系"(重点) function Person() {}; var p = ...
- JS原型和原型链是什么?
Javascript语言的继承机制一直很难被人理解. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- 前端开发面试题—JavaScript原型链
在JavaScript面向对象中,原型链是一个很重要的知识点,经常出现在大大小小的面试题中,关于原型链的面试题有很多问法和知识点.今天主要分享一下我遇到的一个关于原型链的面试题.问题很简单,什么是原型 ...
- 构造函数 + 原型链继承 + 临摹面向对象模式的canvas动画框架
感谢谢帅shawn分享的canvas动画框架,我再来分一次 //动画框架 http://neekey.net/blog/2011/05/11/canvas-%E7%AE%80%E5%8D%95%E5% ...
- 详解面向对象、构造函数、原型与原型链
详解面向对象.构造函数.原型与原型链 为了帮助大家能够更加直观的学习和了解面向对象,我会用尽量简单易懂的描述来展示面向对象的相关知识.并且也准备了一些实用的例子帮助大家更加快速的掌握面向对象的真谛. ...
- 【JavaScript】JavaScript模拟实现面向对象一张图帮助你深刻理解原型链和原型对象
文章目录 一.JavaScript模拟面向对象 1.函数是类 2.函数中各种变量的声明 3.关于函数内的this 小结:JavaScript中函数是什么? 4.练习:面向对象思想编写Complex类 ...
最新文章
- 软考下午题详解---uml图
- 失手打死请自己吃饭的酒友 嫌疑人在深圳落网
- jqGrid edit总结
- 详解Java中的注解
- 所有计算机都可以安装win7,几种安装win7系统的方法介绍
- 看完这15张动图,秒懂万有引力与航天难点!
- 动手学无人驾驶(4):基于激光雷达点云数据3D目标检测
- 字符串匹配——RabinKarp算法
- 怎么让某段css代码只在Chrome 火狐 edge 浏览器生效
- 使用java获取网络响应内容--Get请求方式
- ASP.NET留言板 文字加表情
- c 远程登陆linux,Linux C/C++基础——Windows远程登录Linux
- HR人力资源系统软件价格?哪家HR人力管理系统好
- 使用BeautifulSoup爬取“0daydown”站点的信息(2)——字符编码问题解决
- 前端国际化辅助工具——自动替换中文并翻译
- 极域电子教室卸载、忘记密码解决方案
- lcx端口转发linux_技术干货 | 内网渗透之代理转发
- HTML+PHP+Mysql登录注册页面
- 爆锤数据结构(期末复习笔记)
- python读取csv最后一行_用Python读取CSV文件行的最后一个非空单元格
热门文章
- ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册
- shelve 之VS. pickle
- 用800行代码做个行为树(Behavior Tree)的库(2
- Bash中的$*和$@的区别
- android Fragments详解五:与activity通讯
- ubuntu php上传文件,Ubuntu中增加apache上传文件大小限制(突破Aapache默认2M上传限制)...
- solidworks钣金插件_高效掌握SolidWorks钣金零件加工设计概念
- ​Highmaps网页图表教程之绘图区显示标签显示数据标签定位
- Swift2.0语言教程之函数的返回值与函数类型
- Wireshark数据抓包分析(网络协议篇)第1章网络协议抓包概述