JS构造函数与原型
来源:互联网 发布:淘宝页尾怎么装修 编辑:程序博客网 时间:2024/05/18 16:37
JavaScript中定义"类"的时候可以通过构造函数和原型的方式来实现,它们之间有何区别和利弊呢?
首先来看一个通过构造函数实现类定义的例子:
- function Car(color,model,drivers){
- this.color=color;
- this.model=model;
- this.drivers=drivers;
- this.blar = function(){
- alert("I am a car: " + model + " in " + color + ". " + drivers + " can drive me" );
- }
- }
- var car1 = new Car('red','BMW',['Mike','Kevin']);
- car1.blar();
- var car2 = new Car('red','BMW',['Mike','Kevin']);
- car2.blar();
在来看一个通过利用prototype来定义类的例子:
- function Drivers(){
- var names="";
- this.addDriver= function(name){
- names = names +" " + name;
- }
- this.toString = function(){
- return names;
- }
- }
- function Car(){
- }
- Car.prototype.color = "red";
- Car.prototype.model = "BMW";
- //Car.prototype.drivers = ['Mike','Kevin'];
- Car.prototype.drivers =new Drivers();
- Car.prototype.blar = function(){
- alert("I am a car: " + this.model + " in " + this.color + ". " + this.drivers + " can drive me" );
- };
- var car1 = new Car();
- car1.color='Blue';
- //car1.drivers.push('Luios');
- car1.drivers.addDriver('Mike');
- car1.drivers.addDriver('Kevin');
- car1.drivers.addDriver('Luios');
- car1.blar();//outputs I am a car: BMW in Blue. Mike,Kevin,Luios can drive me
- var car2 = new Car();
- car2.blar(); //outputs I am a car: BMW in red. Mike,Kevin,Luios can drive me
如上例中的drivers使用自定义对象或者数组的时候,如果其中某一个实例改变了其中的值,所有的实例的值都被改变。因为所有实例的属性指向的是同一个对象的引用,如果上面的例子中car2.drivers=['Ivy','Lili'];来改变实例car2的属性内容,相对于car2.drivers指向了另一个对象(这时候car2有一个实例属性,有一个prototype属性都是drivers)。
Javascript是一种动态语言,实例创建之后可以动态添加属性和方法,在“构造函数”的定义之外也可以添加属性和方法。其实,下面例子中sayHi本身也是一个全局的类型为Function的实例。
- var obj = {};
- obj.prop="value";
- obj.test = function(){
- alert("test function: " + this.prop);
- }
- obj.test();
- function sayHi() {
- alert("hi");
- }
- sayHi.sayHello = function() {
- alert("hello");
- };
- sayHi.sayHello();//outputs hello
- function sayHi() {
- alert("hi");
- }
- sayHi.sayHello = function() {
- alert("hello");
- };
- sayHi.sayHello();//outputs hello
- var osayHi = new sayHi();//outputs hi
- osayHi.sayHello(); // TypeError: osayHi.sayHello is not a function
- function sayHi() {
- alert("hi");
- }
- sayHi.prototype.sayHello = function() {
- alert("hello");
- };
- var osayHi = new sayHi();// outputs hi
- osayHi.sayHello(); // outputs hello
- sayHi.sayHello(); //TypeError: sayHi.sayHello is not a function
0 0
- JS构造函数与原型
- JS构造函数与原型
- JS构造函数与原型
- js 构造函数与原型模式
- JS----构造函数与原型prototype 区别
- js中构造函数与原型
- JS----构造函数与原型prototype 区别
- 构造函数与原型
- 原型与构造函数
- js 构造函数(construction)与原型(prototype)
- js构造函数的方法与原型prototype
- JS构造函数与原型prototype的区别介绍
- JS设计模式 -原型模式与构造函数
- ** Javascript 普通函数和构造函数的区别 && JS----构造函数与原型prototype 区别
- 原型链与构造函数
- 构造函数与prototype原型
- 关于js中,原型对象,原型链,构造函数,实例之间关系的理解与区别
- JS原型+构造函数创建对象
- uiautomator中文输入解决方案
- git 修改-撤销
- structs2 验证码实现
- OpenGL ES(6)——响应触摸事件
- 支持分布式数据库同步操作的一个设计点:主键问题
- JS构造函数与原型
- ios开发资料大全
- text-overflow 与word-wrap
- 该怎么使用MindMapper中的缩放功能
- Linux学习总结(13)——在阿里云的ubuntu上部署个人服务
- iOS每日小结-01
- 复古篇:重现iOS6UITableView的Group风格
- jquery实现上传文件大小类型的验证
- SVN版本库修改URL路径或者IP地址