1、相关知识点

(1)构造函数  (函数名首字母大写表示构造函数)

function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class';
//return this; 默认有这一行,浏览器帮忙做了
}
var f = new Foo('chenyan',25); // new 执行时,this先变成一个空对象,然后再Foo函数里给this赋值,最后返回this
console.log(f instanceof Foo)
// instanceof 判断函数Foo 是否是变量 f 的构造函数

(2)、构造函数——扩展

var a={} 其实是 var a = new Object()的语法糖;

var a=[] 其实是 var a = new Array() 的语法糖;

function Foo(){} 其实是 var Foo = new Function();

强烈推荐使用前者写法。

2、原型规则和示例

(1)、所有的引用类型(数组,对象,函数)都具有对象特性,即可自由扩展属性(null除外)

var obj = {};
obj.a = 100;
var arr = [];
arr.a = 100;
function fn() {};
fn.a = 100;

(2)、所有的引用类型(数组,对象,函数)都有一个_proto_(隐式原型)属性,属性值是一个普通对象(null除外)

console.log(obj._proto_);//浏览器默认
console.log(arr._proto_);//浏览器默认

(3)、所有的函数都有一个prototype属性(显式原型),属性值也是一个普通对象

console.log(fn.prototype);//浏览器默认

(4)、所有引用类型(数组,对象,函数)的_proto_属性值 指向它的构造函数的prototype属性值。

console.log(obj._proto_ === Object.prototype);
//Object 是 obj的构造函数

(5)、当试图得到一个对象(引用类型)的某个属性值时,如果这个对象本身没有这个属性,那么会去它的_proto_(即它的构造函数的prototype)中寻找

//构造函数
function Foo(name, age){
this.name = name;
this.age = age;
}
Foo.prototype.alertName = function(){console.log(this.name)};
//创造实例
var f = new Foo("chenyan",25);
f.printAge = function(){console.log(this.age)};
//测试
f.printAge();
f.alertName();//alertName() 不是 f 的自身属性,去 f 的构造函数的prototype 中找;f 继承了构造函数的属性

问题:如何去掉来自原型的属性?

var item;
for( item in f){
//高级浏览器已经在for in 中屏蔽了来自原型的属性
//建议加上这个判断,保证程序健壮性
//hasOwnProperty 获取对象自身属性
if (f.hasOwnProperty(item)) {
console.log(item);
}
}

3、原型链
f.toString() 去f._proto_(Foo.prototype)._proto_(Object) 中找

4、instanceof

用于判断引用类型属于 哪个构造函数的方法

var arr=[];
console.log(arr instanceof Array);

f instanceof Foo 的判断逻辑:

  f 的_proto_ 一层一层往上找,能否对应到Foo.prototype

  再试着判断 f instanceof Object

5、一些题目

(1)、如何判断一个变量是数组类型

var arr=[];
console.log(arr instanceof Array);//true
console.log( tyopeof arr);// Objecct typeof无法判断是否是数组

(2)、写一个原型链继承的例子

JS基础——原型和原型链的更多相关文章

  1. js基础例子dom+原型+oop基础知识记录01

    //oo:概念是计算机中对于现实世界的理解和抽象的方法 //由计算机利用编程技术发展到现在的产物 //面向对象几要素 //对象:由属性和方法组成的集合 //属性:保存数据,存储在对象内存空间中的唯一的 ...

  2. JS基础——构造函数VS原型

    JS是一种基于对象的语言.在使用过程中不免遇到复制对象的问题.但通常我们採用的直接赋值'obj1=obj2'这样的做法会出现数据覆盖问题. 也就是对象引用过程中引用地址一致.导致对象数据被改动的问题. ...

  3. JS基础:基于原型的对象系统

    简介: 仅从设计模式的角度讲,如果我们想要创建一个对象,一种方法是先指定它的类型,然后通过这个类来创建对象,例如传统的面向对象编程语言 "C++"."Java" ...

  4. 前端总结·基础篇·JS(一)原型、原型链、构造函数和字符串(String)

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  5. JS基础-该如何理解原型、原型链?

    JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...

  6. 基础1:JS的原型和原型链究竟

    JS的原型和原型链究竟是什么? 1. 从JS创建一个对象开始说起: 1.1 工厂模式创建对象 (缺点是无法知道创建出来的对象是一个什么类型的对象) function createPerson(name ...

  7. JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...

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

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

  9. JS三座大山再学习(一、原型和原型链)

    原文地址 ## 前言 西瓜君之前学习了JS的基础知识与三座大山,但之后工作中没怎么用,印象不太深刻,这次打算再重学一下,打牢基础.冲鸭~~ 原型模式 JS实现继承的方式是通过原型和原型链实现的,JS中 ...

  10. JS三座大山再学习 ---- 原型和原型链

    本文已发布在西瓜君的个人博客,原文传送门 ## 前言 西瓜君之前学习了JS的基础知识与三座大山,但之后工作中没怎么用,印象不太深刻,这次打算再重学一下,打牢基础.冲鸭~~ 原型模式 JS实现继承的方式 ...

随机推荐

  1. 【消息中间件之RabbitMQ学习】-开篇-001

    写在前面的话 项目中因为要用到消息中间件,当初极力推荐RabbitMq.但因为种种原因,最终选型为java+mongodb自实现一套分布式的消.没有用RabbitMq工作过,实属遗憾.因为个人来说实在 ...

  2. 学习笔记:Spark Streaming的核心

    Spark Streaming的核心 1.核心概念 StreamingContext:要初始化Spark Streaming程序,必须创建一个StreamingContext对象,它是所有Spark  ...

  3. 20155219付颖卓《网络对抗》Exp6 信息搜集与漏洞扫描

    基础问题回答 1.哪些组织负责DNS,IP的管理? 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地址管理. 全球根域名服务器:绝大多数在欧洲和北美(全球13台 ...

  4. 安装python的第三方Pillow库

    方法/步骤 找到easy_install.exe工具.在windows下安装Python后,在其安装路径下的scripts文件中默认安装好了easy_install工具.完整路径如下例:D:\Pyth ...

  5. cocos creator 中的粒子效果

    途中的粒子效果,通过plist文件和png两个文件,创建一个粒子节点,将plist文件拖入到粒子节点的file属性中,然后给custom属性打钩,把png文件拖入到texture属性中即可.

  6. MySQL 8.0常见问题

    1.连接问题: 1.1:8.0的驱动地址更换由原来的com.mysql.jdbc.Driver改为com.mysql.cj.jdbc.Driver 1.2:8.0以后访问地址要加上时区.编码等属性jd ...

  7. 《构建之法》chapter5,6 读书心得

    <构建之法>第五章用体育运动等团队例子引出软件开发团队的形式,用更加生活化.形象化的例子让读者更能理解软件开发团队的形式.软件团队形式多样,适用于不同的人员与需求.团队可能会演变的模式有: ...

  8. 简述rpm与yum命令的常见选项

    rpm是一个功能十分强大的软件包管理系统,它使得在Linux下安装.升级和删除软件包的工作变的容易.并且具有查询.验证软件包的功能. 1)安装选项 命令格式:rpm {-i|--install} [i ...

  9. 枪弹辩驳(弹丸论破)即将登陆PC

    Spike Chunsoft在PSP上的经典推理游戏: 枪弹辩驳1(Danganronpa: Trigger Happy Havoc)即将登陆PC, PC党有福了. 不过我在PSVita上已经玩完了两 ...

  10. php使用fastdfs

    php的服务器地址:10.10.1.2 fastdfs tracker地址:10.15.1.2 fastdfs storage地址:10.16.1.2 将fastdfs的源码上传到php所在服务器,进 ...