JS 原型对象
2019-03-17 20:57
204 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 原型 prototype * * 我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype * 这个属性对应着一个对象,这个对象就是我们所谓的原型对象 * 如果函数作为普通函数调用prototype没有任何作用 * 当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性, * 指向该构造函数的原型对象,我们可以通过__proto__来访问该属性 * * 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象, * 我们可以将对象中共有的内容,统一设置到原型对象中。 * * 当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用, * 如果没有则会去原型对象中寻找,如果找到则直接使用 * * 以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中, * 这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了 */ function MyClass(){ } //向MyClass的原型中添加属性a MyClass.prototype.a = 123; //向MyClass的原型中添加一个方法 MyClass.prototype.sayHello = function(){ alert("hello"); }; var mc = new MyClass(); var mc2 = new MyClass(); //console.log(MyClass.prototype); //console.log(mc.__proto__ == MyClass.prototype); //向mc中添加a属性 mc.a = "我是mc中的a"; //console.log(mc2.a); mc.sayHello(); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 创建一个构造函数 */ function MyClass(){ } //向MyClass的原型中添加一个name属性 MyClass.prototype.name = "我是原型中的名字"; var mc = new MyClass(); mc.age = 18; //console.log(mc.name); //使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true //console.log("name" in mc); //可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性 //使用该方法只有当对象自身中含有属性时,才会返回true //console.log(mc.hasOwnProperty("age")); //console.log(mc.hasOwnProperty("hasOwnProperty")); /* * 原型对象也是对象,所以它也有原型, * 当我们使用一个对象的属性或方法时,会现在自身中寻找, * 自身中如果有,则直接使用, * 如果没有则去原型对象中寻找,如果原型对象中有,则使用, * 如果没有则去原型的原型中寻找,直到找到Object对象的原型, * Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined */ //console.log(mc.__proto__.hasOwnProperty("hasOwnProperty")); //console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty")); //console.log(mc.__proto__.__proto__.__proto__); //console.log(mc.hello); //console.log(mc.__proto__.__proto__.__proto__) </script> </head> <body> </body> </html>
相关文章推荐
- js 创建对象的三种方式——工厂模式、构造函数模式、原型模式
- 对js原型对象的理解
- 关于JS原型对象的创建
- JS面向对象组件(一) ---包装对象与原型链
- js使用原型实现继承与new一个新对象的方法
- 【web前端-理解js原型】理解Javascript中的原型对象、原型链和继承
- [js高手之路]使用原型对象(prototype)需要注意的地方
- js对象3--工厂方法加深引出原型--杂志
- JS对象方法,类方法,原型方法
- JS 对象API之获取原型对象
- js中函数对象的属性,函数原型属性length、name、prototype
- JS "portotype" (内置对象原型改写)
- js 中的对象原型
- js对象继承之原型链继承实例
- JS基础学习第七天:对象原型及原型式的继承
- js中的prototype原型对象(转载)
- 【JS】JavaScript中对象的创建与原型模式
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
- 解析js中的原型链和在原型链中对象属性查找
- 你不知道的javascript之JS原型对象和原型链