<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-认识原型</title>
<script>

function Person(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
// 下面这种方式不能达到方法的共享
// this.study = function(){
// console.log(this.name + '好好学习');
// }
}

Person.prototype.study = function(){
console.log(this.name + '好好学习');
};

var p1 = new Person('张三','b',18);
console.log(p1);
var p2 = new Person('李四','b',19);
console.log(p2);

// 在实例上动态添加属性，会把原型对象上相同的属性给屏蔽掉
p2.study = function(){
console.log('别打扰我，我要学习');
};

// 删除p2中的age

// delete p2.age;

// 判断某个属性是否在一个实例中(属性必须在当前的实例中，而不是在实例的构造函数的原型中)
if (p2.hasOwnProperty('age')) {
console.log(p2.age);
}
if (p2.hasOwnProperty('study')) {
p2.study();
}

</script>
</head>
<body>

</body>
</html>

实例二：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建对象</title>

</head>
<body>
</body>
<script>

// 一个正常的构造器
function Person(name, age) {
this.home = "保护地球，人人有责！";
this.name = name;
this.age = age;
this.desc = function(){
console.log(this.name+" "+this.age+" "+this.home);
}
}

function Student(s){
this.school = s;
}

// 原型继承，如果一个构造器需要需要创建一个有继承的对象时，可以设置构造器的 prototype ，将其指定为一个 作为原型 的对象
Student.prototype = new Person("xxx", 1);
// var protoObj = new Person("xxx", 1);
// Student.prototype = protoObj;
// 子对象的构造器.prototype = new 原型对象的构造器(var1, var2....)

var st = new Student("青云学院");
console.log(st.school);
st.desc();
var st1 = new Student("斯坦福大学");
console.log(st1.school);
st1.desc();
// protoObj.home = "保护地球，从小做起";
Student.prototype.home = "保护地球，从小做起";
st.desc();
st1.desc();

// st.home = "河南";
// st1.home = "荷兰";
// st.desc();
// st1.desc();

</script>
</html>

实例三：

function Person(name, age) {
this.home = "保护地球，人人有责！";
this.name = name;
this.age = age;
this.desc = function(){
console.log(this.name+" "+this.age+" "+this.home);
}
}

// 注意：这里的 sex和study是在追加新的属性和方法之前就调用的，是不能生效的
// var p0 = new Person("小红", 20);
// console.log(p0.sex);
// p0.study();

// Person作为一个正常的构造器也有自己的原型，在没有明确指定 原型的时候 它的原型是一个抽象的 Object 对象，利用这样的机制可以在不修改或者不明确源代码时为该构造器追加新的功能
Person.prototype.sex = "男";
Person.prototype.study = function(){
console.log(this.name+"学习很努力！");
}

var p = new Person("小红", 20);
p.study();

实例四：

function Parent(name,age,sex){
this.home = "保护地球，人人有责！";
this.name = name;
this.age = age;
this.sex = sex;
this.desc = function(){
console.log(this.name+" "+this.age+" "+this.home);
}
}

// 给parent的原型上增加一个方法;
Parent.prototype.say = function(){
console.log(this.name + "说：" + "好好学习吧！")
}

// 创建一个子类构造函数：
function Child(name,age,sex,work){
Parent.call(this,name,age,sex);
this.work = work;
}

// 原型：
Child.prototype = new Parent();
// var protoObj = new Parent();
// Child.prototype = protoObj;

// 给child的原型上增加一个方法;
Child.prototype.show = function(){
console.log(this.name + "的工作是" + this.work );
}

// var parent = new Parent();
// console.log(parent);
// console.log(parent.age);
var child = new Child("小红",18,"girl","designer");
console.log(child);

child.say();
child.show();
// Child.prototype.home = "我爱我家";
// console.log(child.home);

var child1 = new Child("小花",23,"girl","teacher");
console.log(child1);
child1.say();
child1.show();
child1.show = function(){
console.log(this.age +"岁的"+ this.name + "的工作是" + this.work );
}
child1.show();
child1.home = "河南郑州";
console.log(child1.home);
console.log(child1);
alert(child1.constructor == Parent)

Child.prototype.home = "四川";
console.log(child.home);
child.desc()

【JavaScript 6连载】六、认识原型的更多相关文章

  1. Javascript中的对象和原型(3)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  2. Javascript多线程引擎(六)

    Javascript多线程引擎(六) 经过三个月的时间, Javascript 引擎已经完成beta版本(还不支持多线程特性, 预计下个星期就可以支持了, 现阶段还在进行测试基本JS单元功能), 并且 ...

  3. 深入理解JavaScript中的继承：原型链篇

    一.何为原型链 原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找.JavaScript就是通过层层的原型,形成原型链. 二.谁拥有原型 任何对象都可以有原型, ...

  4. JavaScript函数、闭包、原型、面向对象

    JavaScript函数.闭包.原型.面向对象 断言 单元测试框架的核心是断言方法,通常叫assert(). 该方法通常接收一个值--需要断言的值,以及一个表示该断言目的的描述. 如果该值执行的结果为 ...

  5. Javascript中的对象和原型(三)（转载）

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  6. Javascript中的对象和原型(一)（转载）

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

  7. javascript创建对象的方法--动态原型模式

    javascript创建对象的方法--动态原型模式 一.总结 1.作用:解决组合模式的属性和函数分离问题  2.思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数 ...

  8. 林大妈的JavaScript基础知识（三）：JavaScript编程（3）原型

    在一般的编程语言中,我们使用继承来复用代码,做成良好的数据结构.而在JavaScript中,我们使用原型来实现以上的需求.由于JavaScript专注于对象而摒弃了类,我们要明白原型和继承的确是有差异 ...

  9. JavaScript的面向对象原理之原型链详解

    一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...

随机推荐

  1. InnoDB master thread学习

    很久很久没有写博客了,工作比较忙,也没什么时间学习了,恰逢国庆放假,安心的学习一下,其实只是把之前学习过的知识再温习了一下而已.InnoDB 有众多的线程,其中非常核心的就是master thread ...

  2. navicat如何导出mysql数据表结构

    我们在创建数据库时会对字段进行设置,比如类型.长度等,如果字段多的话一个个设置非常麻烦,可以从其他地方已有的表导入数据表结构,怎么操作呢?我们拿navicat导出mysql数据表结构为例: 1.点击“ ...

  3. bcolz的新操作

    1.直接修改 eg:把data.bcolz文件中A列为0的数据填充为1000. data = bcolz.open("data.bcolz", "a") #以& ...

  4. DL中epoch、batch等的意义【转载】

    转自:深度学习中 number of training epochs 中的 epoch到底指什么? - 知乎 https://www.zhihu.com/question/43673341 1. (1 ...

  5. 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇：（六）RTP音视频传输解析层之音视频数据传输格式

    一.差异 本地音视频数据格式和用来传输的音视频数据格式存在些许差异,由于音视频数据流到达客户端时,需要考虑数据流的数据边界.分包.组包顺序等问题,所以传输中的音视频数据往往会多一些字节. 举个例子,有 ...

  6. [LeetCode] 106. Construct Binary Tree from Postorder and Inorder Traversal_Medium tag: Tree Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  7. 遇到问题---hosts不起作用问题的解决方法

    c:\WINDOWS\system32\drivers\etc\hosts 文件的作用是添加 域名解析 定向 比如添加 127.0.0.1  www.baidu.com 那我们访问www.baidu. ...

  8. sql server 函数的自定义

    创建用户定义函数.这是一个已保存 Transact-SQL 或公共语言运行时 (CLR) 例程,该例程可返回一个值.用户定义函数不能用于执行修改数据库状态的操作.与系统函数一样,用户定义函数可从查询中 ...

  9. python date time

    //test.py import time ticks = time.time()print tickslocaltime = time.localtime(time.time())print loc ...

  10. 服务器非root安装gcc 4.8.5

    1.下载gcc-4.8.5: $ wget ftp://ftp.gnu.org/gnu/gcc/gcc-4.8.5/gcc-4.8.5.tar.gz 2.解压gcc: $ tar zxvf gcc-. ...