100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 渡一教育公开课web前端开发JavaScript精英课学习笔记(八)对象 原型

渡一教育公开课web前端开发JavaScript精英课学习笔记(八)对象 原型

时间:2023-05-22 23:10:34

相关推荐

渡一教育公开课web前端开发JavaScript精英课学习笔记(八)对象 原型

原型

原型是构造函数 Function的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。利用原型的特点和概念,可以提取共有属性。

对象的有个隐式的属性:__proto__ ,指向构造函数的原型 Function.prototype

对象原型具有指向构造函数的属性:constructor。

<script type = "text/javascript">//函数的原型,相当于对象继承至其它对象的属性和方法Car.prototype ={carName : "BMW",heitht : 1400,lang : 4900,run : function(){console.log("Runing !!");}}Car.prototype.width = 1600;function Car(color,owner){//new 对象时 创建 this 属性//this 属性默认添加 __proto__ 属性(这里存对象的原型)//this 属性默认添加 constructor 属性(这里存对象的构造函数)this.owner = owner;this.color = color;}var car = new Car("red","sunny");console.log("car.__proto__",car.__proto__);//获取对象的原型console.log("car.constructor",car.constructor);//获取对象的构造函数function Person(){}var per = new Person();console.log("per.__proto__",per.__proto__);//获取对象的原型console.log("per.constructor",per.constructor);//获取对象的构造函数</script>

原型链

对象的 prototype 的 prototype 的prototype……Object 的 prototype (等于null,null 无原型,最后一级)。这种关系就是原型链。

<script type = "text/javascript">//原型链的演示,//原型可以从最后一级访问到顶级,访问子对象的属性时,如子对象没有这个属性,去查询父对象,直到找到属性并返回。//原型链最顶级对象为 ObjectGrand.prototype.lastName = "Zhang"function Grand(){this.another = "yeye";}var grand = new Grand();Father.prototype = grand;function Father(){this.firstName = "jiayi";}var father = new Father();Son.prototype = father;function Son(){this.like = "play game";}var son = new Son();console.log(son.like,son.firstName,son.another,son.lastName);//获取属性值,在原型链上各层级对象的属性值。console.log(son.toString());//会调用原型链上的Object对象的方法。console.log(son);//可以在控制台上查询到原型链的结构。对象的__proto__属性</script>

通过原型创建对象

<script type = "text/javascript">Father.prototype.lastName = "Zhang"function Father(){this.another = "baba";}var Father = new Father();var son = Object.create(Father);//通过原型创建一个对象,创建的对象的原型就是传入的参数var son = Object.create(null)//创建一个无原型的对象。//null undefined 无原型//包装类 Number String Boolean 等有原型</script>

重写原型的属性和方法

<script type = "text/javascript">Father.prototype={toString:function(){//如果不写这个方法,将访问Object的toString方法。return "返回新的信息";}}function Father(){}var father = new Father();console.log(father.toString());</script>

Call/apply

可修改this指向

通过call /apply可以给 obj 对象添加 Person 的属性,差别在于传参方式,call传一个对象和多个参数,apply传一个对象和一个参数数组。

<script type = "text/javascript">function Person(name,age){//call 调用后 this => objthis.name = name;this.age = age;this.play = function(){console.log(this.name + " play !")}}var per = new Person('zhang',18);var obj = {phone:133}var obj1 = {phone:133}console.log(obj);Person.call(obj,'li',20);//通过call 可以给 obj 对象添加 Person 的属性。Person.apply(obj1,['li',20]);//通过apply 可以给 obj 对象添加 Person 的属性。console.log(obj);console.log(obj1);obj.play();obj1.play();//通过call 可以给 Student 添加 Person 的属性。function Student(name,age,techer){Person.call(this,name,age);this.techer = techer;this.study = function(){console.log(this.name + " study !")}}//通过apply 可以给 Student 添加 Person 的属性。function Student1(name,age,techer){Person.apply(this,[name,age]);this.techer = techer;this.study = function(){console.log(this.name + " study !")}}var stu = new Student("wang",12,"liu");var stu1 = new Student1("wang",12,"liu");console.log(stu);console.log(stu1);stu.play();stu.study();stu1.play();stu1.study();</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。