最易懂的js原型之解析
来源:互联网 发布:人工智能的研究内容 编辑:程序博客网 时间:2024/06/07 01:47
一 .什么叫原型
javaScript所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型
二 .为什么要引入原型
首先回顾一下创建对象的几种方法
(1) 字面量的创建法
var box=new Object(); box.name="张三"; box.sex="女"; box.say=function(){ console.log("你是"+this.name+"性别"+this.sex) } box.say();
上边方法创建了一个字面量的对象,但如果要创建多个类似的对象就会产生大量冗余重复的代码 比如
var box2=new Object(); box2.name="张三"; box2.sex="女"; box2.say=function(){ console.log("你是"+this.name+"性别"+this.sex) } box2.say();................................................................................无数个box被创建.........................
(2)工厂模式创建对象
function creatElement(name,sex){ var obj=new Object(); obj.name=name; obj.sex=sex; obj.say=function(){ console.log("你是"+this.name+"性别"+this.sex) } return obj;//不要忘记返回值 } var box1= creatElement("张***","男"); var box2= creatElement("单***","女"); 看吧上边的方法是不是解决了重复实例化的问题,但是有一点他们从属关系不明确,即无法确定他们是哪个对象的实例 console.log(typeof box1)//Object 好吧为了解决上述问题 我们又引入了构造函数创建对象的方法(3)构造函数的方法 // 先说说构造函数和工厂方法的不一样的地方吧 //(1)构造函数没有显示的创建对象(new Object()) //(2)直接将属性和方法赋值给this对象 //(3)没有返回值 //再说说构造函数的一些规范 //(4)函数名和实例化的构造函数名要大写 //(5)通过构造函数创建对象必须加new(); //(6)代表当前作用域的对像的引用 //构造函数和普通函数的调用方式不同 //最后一起见证构造函数的 function CreatObject(name,sex){ this.name=name; this.sex=sex; var money; this.say=function(){ console.log("你是"+this.name+"性别"+this.sex) } this.setMOney=function(Money){ money=Money; } this.getMOney=function(Money){ return money; } }``好啦,构造函数很好的解决了上面的问题那么接下来的问题是为什么引入原型了(是不是绕的有点远啦····~~~~~~~~~) 原型对象最大的优点就是能够实现------共享 对于一个Person类而言 我们都会吃饭 睡觉 放屁 ... 然而 在我们创建人的时候我们还要重复的给他们添加这些大家都默认的属性(这样是不是感觉多此一举啦。。。。。。。。) 于是我们把这些大家都共有的属性放在一个 Person的原型对象里面 这样我们再创建人的时候就可以不用管这些共有的属性,再给他们添加他们独特的属性 比如 会唱歌,会跆拳道,会那个打篮球,会谈恋爱等等。。。。。。。。。。。当我们发现随着人类的发展一些属性又都被人类学会啦,就形成了一种先天的基因那么我们就可以再把这些属性添加到原型里啦。。。。。。。
三 创建构造函数 原型
//构造函数 function Person(name,age){ this.name = name; this.age = age; this.showAge = function(){ console.log(this.name+"的年龄是:"+this.age); } } //构造函数的原型对象 console.log(Person.prototype); // Person {} console.log(Person.prototype.__proto__);// Object {} console.log(Person.prototype.__proto__.__proto__);// null //实例对象 var p1 = new Person("乔峰",35); console.log(p1.__proto__);// Person {} //true,全等:指代的是同一个原型对象,即在内存代表同一个对象 console.log(Person.prototype === p1.__proto__); /* //实例对象的__proto__ 属性设置原型对象,如果不进行对象的原型对象设置,返回Object对象 var p1 = new Object(); p1.__proto__ = Person.prototype; p1.name = "乔峰"; //console.log(p1);//Person { name="乔峰"} //构造器 console.log(Person.prototype.constructor); console.log(p1.__proto__.constructor); console.log(Person); //判断实例对象是否属于某个构造函数(类) console.log(p1.__proto__.constructor === Person); */
四 .原型的相关方法
function Person(name){ this.name = name; } Person.prototype.age = 40; var p = new Person("张三"); /* * 总结: * 1.p.hasOwnProperty("name") 语法:对象.方法("属性名") 查找对象自身是否存在该属性,不能查找到原型对象 * 2. "name" in p 语法:"属性名" in 对象 查找对象自身已经原型对象中是否存在该属性 console.log(p.hasOwnProperty("name"));//true console.log("name" in p);//true console.log(p.hasOwnProperty("age"));//false console.log("age" in p);//true */ /* //查找对象的原型对象 console.log(Object.getPrototypeOf(p)); console.log(p.__proto__); */ /* //Object.create(p) 以p对象为原型,新建一个对象 var p2 = Object.create(p); console.log(p2); console.log(p.name); //判断p是否p2的原型对象 console.log(p.isPrototypeOf(p2)); */
原型学到这里就可以入门啦 。。。。。。。。。。。。。。。。。
“`
0 0
- 最易懂的js原型之解析
- 深入浅出“设计模式”- 最易懂的设计模式解析
- 最简单的JS原型类
- 一个能说明问题的js的原型 prototype的实例--简单易懂
- js原型解析
- 最简单易懂,什么是Node.js
- 单例模式(Singleton)- 最易懂的设计模式解析
- 简单工厂模式(SimpleFactoryPattern)- 最易懂的设计模式解析
- 工厂方法模式(Factory Method)-最易懂的设计模式解析
- 抽象工厂模式(Abstract Factory)- 最易懂的设计模式解析
- 策略模式(Strategy Pattern)- 最易懂的设计模式解析
- 适配器模式(Adapter Pattern)- 最易懂的设计模式解析
- 代理模式(Proxy Pattern)- 最易懂的设计模式解析
- 模板方法模式(Template Method) - 最易懂的设计模式解析
- 建造者模式(Builder Pattern)- 最易懂的设计模式解析
- 外观模式(Facade Pattern) - 最易懂的设计模式解析
- 【设计模式】 工厂方法模式(Factory Method)-最易懂的设计模式解析
- 【设计模式】 抽象工厂模式(Abstract Factory)- 最易懂的设计模式解析
- leetcode_299. Bulls and Cows 猜数字,返回猜对数字和猜对数字和位置的数字个数
- Laravel 的中大型專案架構
- 1037. Magic Coupon (25)
- jQuery笔记(一)
- IO复用之select分析笔记
- 最易懂的js原型之解析
- 16.11.3
- 周二
- LeetCode 41 First Missing Positive
- UML类图与类的关系详解
- CTS fail issue学习
- Java的枚举类型使用方法详解
- leetcode刷题系列-Find All Anagrams in a String
- App项目之新手引导页