JS基础——原型和原型链

Wesley13
• 阅读 782

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) 中找

JS基础——原型和原型链

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)、写一个原型链继承的例子

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
ZY ZY
3年前
js继承的几种方式
1.原型链继承原型链继承:想要继承,就必须要提供父类(继承谁,提供继承的属性)//父级functionPerson(name)//给构造函数添加参数this.namename;this.age10;this.sumfunction()console.log(this.name)//原
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这