(学习自慕课网《前端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(原型和原型链)的更多相关文章

  1. Js 原型和原型链

    Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...

  2. 【repost】JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  3. JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  4. JS原型与原型链终极详解(转)

    JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...

  5. 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...

  6. JS原型和原型链

        1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...

  7. 深入JS原型与原型链

    要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...

  8. JS对象、原型链

    忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...

  9. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  10. JS 原型与原型链

    图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...

随机推荐

  1. CentOS 7.4升级curl和git到最新版本

    升级curl和git到最新版本 [root@jenkins ~]# yum install -y curl-devel expat-devel gettext-devel openssl-devel ...

  2. java.lang.IllegalArgumentException: Illegal character in query at index ...解决办法

    今天在写智能机器人问答实现的时候遇到了一个问题,就是我发送消息不能输入空格 给我报了一个错误java.lang.IllegalArgumentException: Illegal character ...

  3. Log4j日志框架小记

    人啊,总是在学习中发现不足,不足中学习,学习中成长. 今天来系统记录一下对于常用日志组件的理解.配置.使用. 仅供参考, 错误之处请各路好汉不吝笔墨批评指正. 转载请注明出处 Log4j日志框架是Ap ...

  4. 重新安装Magento CE 2.1.0

    删除 var/cache 文件夹 删除 var/generation文件夹 删除 app/etc/config.php 删除 app/etc/env.php 如果您觉得阅读本文对您有帮助,欢迎转载本文 ...

  5. 学习express(一)

    菜鸟教程简介:Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速地搭建一 ...

  6. LR中操中MySQL脚本模板

    Action(){ char chQuery[128]; MYSQL *Mconn; int result; //引入mysql动态链接库 lr_load_dll("libmysql.dll ...

  7. 关于sqlserver帐号被禁用问题

    若发现sqlsrver所有帐号不小心被禁用了,这个时候怎么办?用重装吗?不用,仔细看小白是怎么一步一步解开这个谜题的.首先需要Windows帐号设置里重新添加一个新帐号.并将其添加到管理员组里面,然后 ...

  8. hihoCoder #1151 : 骨牌覆盖问题·二 (矩阵快速幂,DP)

    题意:给一个3*n的矩阵,要求用1*2的骨牌来填满,有多少种方案? 思路: 官网题解用的仍然是矩阵快速幂的方式.复杂度O(logn*83). 这样做需要构造一个23*23的矩阵,这个矩阵自乘n-1次, ...

  9. codevs 1487 大批整数排序(水题日常)

     时间限制: 3 s  空间限制: 16000 KB  题目等级 : 黄金 Gold 题目描述 Description !!!CodeVS开发者有话说: codevs自从换了评测机,新评测机的内存计算 ...

  10. (转)MyBatis框架的学习(一)——MyBatis介绍

    http://blog.csdn.net/yerenyuan_pku/article/details/71699343 MyBatis介绍 MyBatis本是apache的一个开源项目iBatis,2 ...