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 + " ...
随机推荐
- Python之路【第三篇】:文件操作
一.文件操作步骤 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 歌名:<大火> 演唱:李佳薇 作词:姚若龙 作曲:马奕强 歌词: 有座巨大的停了的时钟 倾倒在赶 ...
- Python实现图片转文字并翻译至剪切板
一.环境搭建: 1.PySimpleGUI: pip3 install pysimplegui 2.pytesseract需要有tesseract环境才行: 1. 先搭建tesseract: brew ...
- Failed to resolve directive: el vue2报错
vue2报错 Failed to resolve directive: el 为什么会报这个错呢,主要还是因为vue升级的时候,v-el在vue2.x以后被淘汰.使用新的标签ref替换v-el,接下来 ...
- Learn to Create Everything In a Fragment Shader(译)
学习在片元着色器中创建一切 介绍 这篇博客翻译自Shadertoy: learn to create everything in a fragment shader 大纲 本课程将介绍使用Shader ...
- sql 和xml
一·常用基本功能 表结果: 1. 1 <row> 2 <ID>1035</ID> 3 <Rate>6.12</Rate> 4 <Dat ...
- 【树形DP】BZOJ1040-[ZJOI2008]骑士
[题目大意] 有n个骑士,给出他们的能力值和最痛恨的一位骑士.选出一个骑士军团,使得军团内没有矛盾的两人(不存在一个骑士与他最痛恨的人一同被选入骑士军团的情况),并且,使得这支骑士军团最具有战斗力,求 ...
- 2017-2018-1 JAVA实验站 冲刺 day01
2017-2018-1 JAVA实验站 冲刺 day01 各个成员在 Alpha 阶段认领的任务 小组成员 分工 任务量 张韵琪 写博客.后期市场推广,营销.打杂.各职能的配合 齐力锋 提供宣传用图. ...
- asp.net mvc4 简单使用Autofac依赖注入小结
1,首先使用 NuGet下载适当的Autofac版本 文件一,Autofac.3.5.2 文件二,Autofac.Mvc4.3.1.0 1,接口类 public interface IReposito ...
- 人脸检测:微软 VS Face++
近些年国内的人脸技术已经得到了很大的发展,今天网上无意看到了微软和face++两家公司的人脸检测,Face++号称国际顶尖的技术,也用过他们的接口感觉确实很不错,而微软则不再话下了.于是想对比微软和F ...
- WM-N-BM-09 WM-N-BM-14
USI Delivers WICED Module to Gain Great Success Customers Broadcom’s Wireless Internet Connectivity ...