js 构造函数(construction)与原型(prototype)
1.面向对象:js原型
java有class和instance,js仅仅有构造函数(function Cat(name,age){this.name=name;this.age=age}),为了实现数据共享和抽象出通用的属性,加了一个原型prototype
eg:
function Cat(name,age){
this.name = name;//这里的this相当于java里面的instance
this.age = age;
this.work = function(){
alert("I am working");
}
}
var cat1 = new Cat("cat1",13);
var cat2 = new Cat("cat2",15);
cat1和cat2的都有work属性,可是一样的属性,明显是多余的,造成浪费。能够抽象出原型出来
function Dog(name,age){
this.name = name;
this.age = age;
}
Dog.prototype = {work:function(){alert("I am working!")}}或者
Dog.prototype.work = function(){
alert("I am working");
}
2.封装:
原始模式:var cat = {};cat.name = "cat1";cat.id = "id1";
原始模式改进:var cat = function cat(name,id){return {name:name,id:id}},相当于调用函数
构造函数模式:function(name,id){this.name = name;this.id=id}
js中构造函数在初始化的时候加new和不加new的差别
function Dog(name,age){
this.name = name;
this.age = age;
}
Dog.prototype = {work:function(){alert("I am working!")}}
var dog1 = Dog("dog1",12);//这仅仅是相当于调用普通函数。原型work不会生成,调用work属性会报错
var dog2 = new Dog("dog2",13);//这里是调用构造函数,初始化原型work
var dog3 = new Dog("dog3",14);
dog2.constructor == Dog; dog3.constructor == Dog
为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
所谓"构造函数",事实上就是一个普通函数,可是内部使用了this变量。对构造函数使用new运算符,就能生成实例。而且this变量会绑定在实例对象上。
3.继承
(1)对象冒充
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor) {
}
function ClassB(sColor) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
}
在这段代码中,为 ClassA 赋予了方法 newMethod(请记住。函数名仅仅是指向它的指针)。然后调用该方法。传递给它的是 ClassB 构造函数的參数 sColor。最后一行代码删除了对 ClassA 的引用,这样以后就不能再调用它。
全部新属性和新方法都必须在删除了新方法的代码行后定义。否则。可能会覆盖超类的相关属性和方法:
function ClassB(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //输出 "blue"
objB.sayColor(); //输出 "red"
objB.sayName(); //输出 "John"
js 构造函数(construction)与原型(prototype)的更多相关文章
- 类(class)、构造函数(constructor)、原型(prototype)
类 Class 类的概念应该是面向对象语言的一个特色,但是JavaScript并不像Java,C++等高级语言那样拥有正式的类,而是多数通过构造器以及原型方式来仿造实现.在讨论构造器和原型方法前,我可 ...
- 【JS】中的原型prototype到底是个啥
一.什么是原型 原型prototype是函数的一个属性,这个属性是一个指针,指向一个对象(原型对象),这个原型对象的用途是包含可以由特定类型的所有实例共享的属性和方法. 函数也是一种对象.它也是属性的 ...
- JavaScript中的类(class)、构造函数(constructor)、原型(prototype)
类 Class 类的概念应该是面向对象语言的一个特色,但是JavaScript并不像Java,C++等高级语言那样拥有正式的类,而是多数通过构造器以及原型方式来仿造实现.在讨论构造器和原型方法前,我可 ...
- JS构造函数原理与原型
1.创建对象有以下几种方式: ①.var obj = {}; ②.var obj = new Object(); ③.自定义构造函数,然后使用构造函数创建对象 [构造函数和普通函数的区别:函数名遵循大 ...
- 08 (h5*) js第9天--原型、继承
目录: 1:原型和原型链 2:构造函数的原型可以改变 3:原型的最终指向 4:先修改原型指向,在添加方法. 5:实例对象中的属性和原型属性重合, 6:一个神奇的原型链 7:继承 8:原型链 9:利用c ...
- js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...
- js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。
js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...
- 深入研究js构造函数和原型
很快就要从新浪离职了,最近心情比较轻松,抽点空整理一下构造函数和原型的机理. 我们都知道,在经典设计模式中我们最常用的就是工厂模式.构造函数模式.原型模式这几种,听起来‘模式’好像很高大上的样子,实际 ...
- JS构造函数的用法和JS原型
$(function(){ var rec = new Rectangle(5, 10); //alert(rec.width + "*" + rec.height + " ...
随机推荐
- Bzoj2120/洛谷P1903 数颜色(莫队)
题面 Bzoj 洛谷 题解 考虑对操作离线后分块处理询问操作(莫队算法),将询问操作按照编号分块后左端点第一关键字,右端点第二关键字排序(分块大小为\(n^{\frac 23}\)),对于每一个询问操 ...
- java getenv getProperties区别
网上很多使用的是getProperties.说获得系统变量,但是其实不正确.getProperties中所谓的"system properties"其实是指"java s ...
- spring完成自动装配
让spring完成自动装配 Autowiring 解决标签为javaBean注入时难以维护而实现的 下面是几种autowire type的说明: 1,byname:试图在容器中寻找和需要自动装配的属性 ...
- 什么是DQL、DML、DDL、DCL
SQL(Structure Query Language)语言是数据库的核心语言. SQL的发展是从1974年开始的,其发展过程如下: 1974年-----由Boyce和Chamberlin提出,当时 ...
- 看雪论坛 破解exe 看雪CTF2017第一题分析-『CrackMe』-看雪安全论坛
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 逆向 黑客 破解 学习 论坛 『CrackMe』 http://bbs.pediy.co ...
- POJ 2186 Popular Cows 强连通分量模板
题意 强连通分量,找独立的块 强连通分量裸题 #include <cstdio> #include <cstdlib> #include <cstring> #in ...
- [转]Android中的android:layout_width和android:width
android:width 其实是定义控件上面的文本(TextView) 的宽度,当然这个宽度也是和 android:layout_width 配合起来作用的,如果 android:layout_ ...
- [转]在eclipse打开的android虚拟手机,打开File Explorer,下面是空的没有data、mnt、system三个文件
在eclipse打开的android虚拟手机,打开File Explorer,下面是空的没有data.mnt.system三个文件 这是因为模拟器没有选择打开的缘故,必须首先打开一个模拟器(AVD), ...
- TCP长连接与短链接
1. TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接,连接的建立是需要三次 ...
- 解决WPF中重载Window.OnRender函数失效问题
今天实验一个绘图算法的时候,偶然发现重载Window.OnRender的方法是没有效果的. public partial class MainWindow : Window { public Main ...