博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS基础知识之原型和原型链
阅读量:5960 次
发布时间:2019-06-19

本文共 2597 字,大约阅读时间需要 8 分钟。

构造函数

基本上只要是大写字母开头的函数就是构造函数

function Foo(name,age){        this.name = name;        this.age = age;        this.class = 'class one';        // return this;  默认有这一行     }    var f = new Foo('hanmeimei',18); //new 是构造函数形成实例的过程    var f2 = new Foo('lilei',19);复制代码

构造函数-扩展

1、var a = {} 定义空对象,其实是 var a = new Object()的语法糖     2、var a = [] 其实是 var a = new Array() 的语法糖     3、function Foo() {...} 其实是var Foo = new Function(...),例如        var Sum = new Function('a', 'b', 'return a + b');     4、使用 instanceof 判断一个函数是否是一个变量的构造函数     推荐使用前面的书写方式,通俗易懂。复制代码

原型规则和示例

5个原型规则

  • 1、所有的引用类型(数组、对象、函数)都具有对象特性,即可自由扩展属性(除了属性 'null'之外)
var obj = {};        obj.a = 100;        var arr = [];        arr.a = 100;        function fn(){}        fn.a = 100;复制代码
  • 2、所有的引用类型(数组、对象、函数),都有一个_proto_ 属性,属性值是一个普通对象。
console.log(obj._proto_);        console.log(arr._proto_);        console.log(fn._proto_);复制代码
  • 3、所有的函数,都有一个prototype属性,属性值是一个普通对象。
console.log(fn.prototype)复制代码
  • 4、所有的引用类型(数组、对象、函数),都有一个_proto_ 属性指向它的构造函数的prototype属性值
console.log(obj._proto_ === Object.prototype)复制代码
  • 5、当试图得到一个对象的属性时,如果这个对象本身没有这个属性,那么会去它的_proto_(即它的构造函数的prototype)中去寻找。
//构造函数       function Foo(name,age){         this.name = name;       }       Foo.prototype.alertName = function () {           alert(this.name)       }       //创建示列       var f = new Foo('lilei');       f.printName = function () {           console.log(this.name)       }       //测试       f.printName() //获取f本身的属性,并执行       f.alertName() //获取f的隐示原型(去对应构造函数的显示原型寻找到了)复制代码

循环对象自身的属性

var item;       for(item in f){        //高级浏览器已经在 for in 中屏蔽了来自原型的属性        //但是还是建议加上这个判断,保证诚心的健壮性        if(f.hasOwnProperty(item)){            console.log(item)        }       }复制代码

原型链

//构造函数       function Foo(name,age){         this.name = name;       }       Foo.prototype.alertName = function () {           alert(this.name)       }       //创建示列       var f = new Foo('lilei');       f.printName = function () {           console.log(this.name)       }       //测试       f.printName() //获取f本身的属性,并执行       f.alertName() //获取f的隐示原型(去对应构造函数的显示原型寻找到了)       f.toString()  //f._proto_._proto_ 中查找复制代码

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

  • f instanceof Foo 的判断逻辑: f的_proto_一层一层往上,能否找到对应的Foo.prototype

通俗易懂的原型链继承的例子

//动物       function Animal(){           this.eat = function () {               console.log('animal eat')           }       };       //狗       function Dog(){           this.bark = function () {               console.log('dog bark')           }       };       Dog.prototype = new Animal();       //声明一个实例 金毛       var jm = new Dog();复制代码

转载于:https://juejin.im/post/5cab10d1e51d452b3d4e994e

你可能感兴趣的文章
使用Spark和MemSQL Spark连接器运行实时应用
查看>>
面子&&钱
查看>>
X Window 与 命令行模式
查看>>
启用systemd的gentoo安装方法
查看>>
Python批量进行One-hot
查看>>
10 个著名的 JavaScript 库 与 其他19个有用的JavaScript库
查看>>
美国的程序员真不容易——70岁了还在写代码开了自己的github
查看>>
unqlite在php下的测试
查看>>
JavaScript ,Python,java,Go系列算法之选择排序
查看>>
闲谈一
查看>>
WebView内图片点击以及点击不跳转浏览器
查看>>
原码、反码和补码
查看>>
mybatis的缓存机制(一级缓存二级缓存和刷新缓存)和mybatis整合ehcache
查看>>
java各种排序
查看>>
hadoop作业map过程调优使用到的参数笔记
查看>>
不是从创建控件的线程访问
查看>>
pcDuino安装synergy(添加PART2)
查看>>
云计算时代:大数据泡沫正无限膨胀(csdn)
查看>>
ubuntu linux下各种格式软件包的安装卸载
查看>>
Django一个比较隐含的函数url(转)
查看>>