原型和构造函数(1)

构造函数的形式

1，使用new关键字创建对象

2，使用构造函数，把新创建出来的对象，赋值给构造函数内的this

3，在构造函数内使用this为新创建出来的对象新增成员

4，默认返回新创建的这个对象

     function Animal(name,type,){this.name =name;this.type =type;this.barkWay = function(){console.log('汪汪汪')}}var  dog =new Animal('大黄','dog');dog.barkWay();//汪汪汪

注意：如果想使用正常的函数一样使用构造函数

1，构造函数中的this将不再指向新创建出来的对象

2，构造函数中的this这个时候多指向window对象，当使用this给对象添加成员的时候，全部添加到window上

构造函数存在的问题

构造函数中的方法，每新创建一个对象的时候，该对象都会重新创建方法，每个对象独占一个方法，但是该方法内容完全相同，所以造成资源浪费

function Animal(){this.name = '大黄';this.type ='dog';this.age =15;this.bark = function(){console.log('汪汪汪')}
}
var dog = new Animal();
var cat = new Animal();dog.bark();//汪汪汪cat.bark();//汪汪汪

解决方法1

将构造函数内的房进行提取放到构造函数外面，在构造函数内部引用，那么创建出来的对象，都会指向构造函数外面的这个函数，达到共享的目的

function barkWay(){console.log(this.type +this.yell)}function  Animal(name,type,yell){this.name = name;this.type = type;this.yell =yell;this.bark =barkWay;}var dog = new Animal('大黄','狗','汪汪汪');var cat = new Animal('小花','猫','喵喵喵');cat.bark();//猫喵喵喵dog.bark();//狗汪汪汪

问题：全局变量增多，造成全局变量污染，代码结构混乱，不易维护

解决方法2

使用原型

 function  Animal(name,type,yell){this.name = name;this.type = type;this.yell =yell;}Animal.prototype.bark  =function(){console.log(this.type + this.yell)};var dog = new Animal('大黄','狗','汪汪汪');var cat = new Animal('小花','猫','喵喵喵');cat.bark();//猫喵喵喵dog.bark();//狗汪汪汪

原型：在构造函数创建出来的时候，系统会默认的创建并关联一个对象，这个对象就是原型，原型对象默认是空对象

原型的作用：原型中的成员，可以被使用和它关联的构造函数创建出来的所有对象共享

当使用对象访问属性和方法的时候，会首先在对象内部进行查找，如果找到了，就直接使用，如果没有找到，就去原型中查找，查找到之后使用，如果原型中没有，如果是属性就是undefined，如果是方法就是报错

function Person(name,age,sing){this.name = name ;this.age =age;this.sing =sing;}Person.prototype.sayHello = function(){console.log("你好我是"+this.name);
};Person.prototype.singName = function(){console.log(this.sing)};var p = new Person('张学友',18,'一千个伤心的理由');var p1 = new Person('刘德华',28,'忘情水');p.sayHello();//你好我是张学友p1.sayHello();//你好我是刘德华
p.singName();//一千个伤心的理由p1.singName();//忘情水

原型对象的使用

1，使用对象的动态特性，为原型对象添加成员

2，直接替换原型对象

如果使用第二种方法使用原型，会出现如下问题

在替换原型之前创建的对象和在替换原型之后的创建的对象的原型，，不是同一个

function Person(name,age,sing){this.name = name ;this.age =age;this.sing =sing;}Person.prototype.sayHello = function(){console.log("你好我是"+this.name);//你好我是刘能
};var p = new Person('刘能',18,'male');p.sayHello();Person.prototype ={msg:'你猜我在不在'};var p1 =new Person('刘二狗',24,'male');console.log(p1.msg);//你猜我在不在p1.sayHello();//Uncaught TypeError: p1.sayHello is not a functionp.sayHello();//Uncaught TypeError: p.sayHello is not a function

使用原型的注意事项

1，使用对象访问属性的时候，如果在本身内找不到就回去原型中查找，但是使用点语法进行属性赋值的时候，并不会去原型中进行查找，使用点语法赋值的时候，

如果对象不存在该属性，就会给该对象新增该属性，而不会修改原型中的属性

 function Person(){}Person.prototype.name ="张三";Person.prototype.age =18;var  p = new Person();console.log(p.name);//张三p.name ="李四";console.log(p.name);//李四var p1 =new Person();console.log(p1.name)//张三

2，如果在原型中的属性是引用类型的属性，那么所有对象共享该属性，并且一个对象修改了该引用类型中的成员，其他都会受到影响

 function Person(){}Person.prototype.name ="张三";Person.prototype.age =18;var x = {brand:'奥迪',type:'A7'};Person.prototype.car =x;var  p = new Person();console.log(p.car.brand);//奥迪Person.prototype.car ={brand: 'BYD'};var p1 =new Person();console.log(p.car.brand);//BYDconsole.log(p1.car.brand);//BYD

3，一般情况下不会讲属性添加到原型中，只会将需要共享的方法，添加到原型对象中

转载于:https://www.cnblogs.com/lrgupup/p/9283082.html

原型和构造函数(1)相关推荐

原型和构造函数(2)
访问原型的方法 1,通过构造函数访问原型 function Person(){}var p =new Person();Person.prototype.msg ='在不在' 2,通过实例化对象访问原 ...
javascript 面向对象 new 关键字原型链构造函数
JavaScript面向对象 JavaScript 语言使用构造函数(constructor)作为对象的模板.所谓"构造函数",就是专门用来生成实例对象的函数.它就是对象的模板,描 ...
《权威指南》笔记 - 9.1-9.2 类和原型、构造函数
实现类的方法很多种,可以通过从原型来继承,实现类.也可以通过调用构造函数,来实现类.构造函数的prototype属性被用作新对象的原型. **:定义构造函数的时候,首字母要大写. ** : 构造函数使 ...
34 JavaScript中的构造函数和原型
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.概述在典型的OOP语言中(如Java),都存在类的概念.类就是对象的模板,对象就是类 ...
关于对象、构造函数、原型、原型链、继承
对象: 在传统的面向过程的程序设计中,会造成函数或变量的冗余.而js中对象的目的是将所有的具有相同属性或行为的代码整合到一起,形成一个集合,这样就会方便管理,例如: var person1={name ...
js面向对象小结（工厂模式，构造函数，原型方法，继承）
本文转至:TJYoung 最近过了一遍尼古拉斯泽卡斯的高级程序设计第三版(红皮书)第六章:面向对象程序设计,现在把总结出来的东西和大家分享一下. 主要内容如下: 1.工厂模式 2.构造函数模式 3.原 ...
浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
js面向对象-组合使用构造函数模式和原型模式（使用最广泛、认同度最高）
组合使用构造函数模式和原型模式构造函数模式用于定义实例属性原型模式用于定义方法和共享的属性优点:每个实例都有自己的实例属性的副本,但同时共享对方法的引用,最大限度的节省内存 function P ...
构造函数、原型、继承原来这么简单？来吧，深入浅出
构造函数小编上篇博客中介绍到的通过关键字class方式定义类,然后根据类再创建对象的方式,是ES6中语法,现在很多浏览器对ES6的支持还不是很好,所以也要学习通过构造函数(构建函数)的方式创建对象 ...

原型和构造函数(1)

原型和构造函数(1)相关推荐

最新文章

热门文章