JS(原型和原型链)
(学习自慕课网《前端JavaScript 面试技巧》
JS(原型和原型链)
题目1.如何准确判断一个变量是数组类型
使用 instanceof 方法
题目2.写一个原型链继承的例子
实例:封装 DOM 查询
定义构造函数 Elem,属性封装成 id
打印出所有的 html
将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’
链式操作
题目3.描述 new 一个对象的过程
1.创建一个新对象
2.this 指向这个新对象
3.执行代码,即对 this 赋值
4.返回 this
一、构造函数
大写字母开头一般都是构造函数
new 的过程:
1.var f = new Foo('zhangsan',20) 将参数传进去,函数中的 this 会变成空对象
2.this.name = name;this.age = age;this.class = 'class-1' 为赋值;return this 为实际的运行机制
3.return 之后赋值给 f ,f 具备了 f.name = zhangsan、f.age = 20、f.class = 'class-1'
4.继续执行到 f1 ,则 f1.name = lisi、f1.age = 22、f1.class = 'class-1'
二、构造函数(扩展)
1.var a = {} 其实是 var a = new Object()的语法糖 (a 的构造函数是 Object 函数)
2.var a = [] 其实是 var a = new Array()的语法糖 (a 的构造函数是 Array 函数)
3.function Foo(){...}其实是 var Foo = new Function(...) (Foo 的构造函数是 Function 函数)
4.使用 instanceof 判断一个函数是否是一个变量的构造函数 (判断一个变量是否为“数组” 变量 instanceof Array)
三、原型规则
1.所有的引用类型(数组、对象、函数)都具有对象特性,即可自由扩展属性(除了“null”)
2.所有的引用类型(数组、对象、函数)都有一个 _proto_ 属性(隐式原型属性),属性值是一个普通的对象
3.所有的函数,都有一个 prototype(显式原型)属性,属性值也是一个普通的对象
4. 所有的引用类型(数组、对象、函数), _proto_ 属性值(隐式原型属性)指向它的构造函数的“prototype”属性值
当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的_proto_(即它的构造函数的 prototype(显式原型))中寻找
5.
f.printName() 中 f 的(自身)属性是 name ,属性值是 zhangsan
f.alertName() 中 f 的隐式原型正好指向 Foo 的显式原型 Foo.prototype, f 本身没有 alertName 的属性,会去其隐式原型中寻找,故执行f.alertName()时会执行Foo.prototype.alertName = function (),因为 Foo 扩展 function,故输出 zhangsan
故通过对象的属性的形式来执行函数的时候,无论函数是自身的属性还是从原型中得到的属性, this 永远指向 f 自身,没有指向函数,故执行f.alertName()时,alert(this.name) 中的 this 就是 f 。
6.循环对象自身的属性
if (f.hasOwnProperty(item)) 中遍历 f 时,判断遍历中的 item,是否可以通过 hasOwnProperty 验证,通过则表明它是 f 自身的属性,未通过则表明 是 f 通过原型获得的属性
四、原型链
f.toString(),当这个对象没有这个属性的时候,去它自身的隐式原型中找,它自身的隐式原型就是它构造函数(Foo)的显式原型(Foo.prototype)但显式原型(Foo.prototype)中并没有 toString ;但显式原型(Foo.prototype)也是对象,也要在它的隐式原型中找,即在其构造函数 (Object )的显式原型中去找 toString. 故要在 f._proto_(隐式原型)的._proto_(隐式原型)中找,如图所示,故输出 null
方框为 构造函数,圆框为 对象,特例:Object.prototype 的 隐式原型是 null (JS避免死循环)
五、instanceof
判断 引用类型 属于哪个 构造函数 的方法
f instanceof FOO 的判断逻辑:f 是 Foo new出来的一个类型(正确)
判断方式:f 的隐式原型(proto)一层一层往上,能否对应到 Foo.prototype(显式原型)
试判断:f instance of Object (正确)见上图
JS(原型和原型链)的更多相关文章
- Js 原型和原型链
Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...
- 【repost】JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS原型与原型链终极详解(转)
JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...
- 总结一下js的原型和原型链
最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...
- JS原型和原型链
1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...
- 深入JS原型与原型链
要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...
- JS对象、原型链
忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...
- JS面向对象之原型链
对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...
- JS 原型与原型链
图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...
随机推荐
- CentOS 7.4升级curl和git到最新版本
升级curl和git到最新版本 [root@jenkins ~]# yum install -y curl-devel expat-devel gettext-devel openssl-devel ...
- java.lang.IllegalArgumentException: Illegal character in query at index ...解决办法
今天在写智能机器人问答实现的时候遇到了一个问题,就是我发送消息不能输入空格 给我报了一个错误java.lang.IllegalArgumentException: Illegal character ...
- Log4j日志框架小记
人啊,总是在学习中发现不足,不足中学习,学习中成长. 今天来系统记录一下对于常用日志组件的理解.配置.使用. 仅供参考, 错误之处请各路好汉不吝笔墨批评指正. 转载请注明出处 Log4j日志框架是Ap ...
- 重新安装Magento CE 2.1.0
删除 var/cache 文件夹 删除 var/generation文件夹 删除 app/etc/config.php 删除 app/etc/env.php 如果您觉得阅读本文对您有帮助,欢迎转载本文 ...
- 学习express(一)
菜鸟教程简介:Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速地搭建一 ...
- LR中操中MySQL脚本模板
Action(){ char chQuery[128]; MYSQL *Mconn; int result; //引入mysql动态链接库 lr_load_dll("libmysql.dll ...
- 关于sqlserver帐号被禁用问题
若发现sqlsrver所有帐号不小心被禁用了,这个时候怎么办?用重装吗?不用,仔细看小白是怎么一步一步解开这个谜题的.首先需要Windows帐号设置里重新添加一个新帐号.并将其添加到管理员组里面,然后 ...
- hihoCoder #1151 : 骨牌覆盖问题·二 (矩阵快速幂,DP)
题意:给一个3*n的矩阵,要求用1*2的骨牌来填满,有多少种方案? 思路: 官网题解用的仍然是矩阵快速幂的方式.复杂度O(logn*83). 这样做需要构造一个23*23的矩阵,这个矩阵自乘n-1次, ...
- codevs 1487 大批整数排序(水题日常)
时间限制: 3 s 空间限制: 16000 KB 题目等级 : 黄金 Gold 题目描述 Description !!!CodeVS开发者有话说: codevs自从换了评测机,新评测机的内存计算 ...
- (转)MyBatis框架的学习(一)——MyBatis介绍
http://blog.csdn.net/yerenyuan_pku/article/details/71699343 MyBatis介绍 MyBatis本是apache的一个开源项目iBatis,2 ...