js继承原型

来源：互联网发布：origin8怎么导入数据编辑：程序博客网时间：2024/06/03 15:02

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.head{font-size:12px;padding:6px 0 0 10px;}
#login_box{width:300px;height:150px;background:#eee;
border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}
#login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
#close{width:14px;height:14px;background:url(close.png) no-repeat;position:absolute;right:4px;top:6px;cursor: pointer;background-color: red;}
</style>

</head>
<body>
<div class="head">亲，您好！<input type="button" value="登录" id="login"></div>
<div id="login_box">
<p>用户登录</p ><span id="close">关闭</span>
</div>

<script>

var person = {
age:26,
name:'wang',
say:function (num) {
console.log ("my name is "+this.age+",my name is "+this.name+'.');
//console.log ("my name is "+person.age+",my name is "+person.name+'.');
console.log("传进一个参数："+num);
}
}

/*
* 上面那个对象有三个属性 age name say
* 有一个属性是方法如 say
* 如果我们想读他的age属性直接console.log(person.age);
* 如果我们要添加一个新的属性如job person.job = "coder";
* if we want to change the property(age),just as : person.age = 29;
* 对于第三个Say 里面用到了this 这个关键字，以后会单讲，在这里你可以理解成 this 就是person 这个对象但是不建议直接用person
*
* 问题来了：设置person一个新属性其为一个方法，这个方法存一个数字的参数，这个参数为你想设定的年龄。将person的年龄修改掉，
* 修改后再调用 person的say 方法。
* */
//person.say(5);

/*
* 以上知识点
* 对象对象属性的修改对象方法的调用对象中的this 函数参数
* */

function Person(option) {
this.age = option.age;
this.name = option.name;
this.say = function () {
console.log ("my name is "+this.age+",my name is "+this.name+'.');
//console.log ("my name is "+person.age+",my name is "+person.name+'.');
}
}

var person = new Person({age:18,name:'wang'});

person.say();

//为什么我们不如下写？
function Person1(age,name) {
this.age = age;
this.name = name;
this.say = function () {
console.log ("my name is "+this.age+",my name is "+this.name+'.');
//console.log ("my name is "+person.age+",my name is "+person.name+'.');
}
}

/*
* 你可以想如果有非常多的参数名称，而我们又忘了参数的顺序
* */

var person2 = new Person1('wang',18);
person2.say();//这会输出什么？你会发现 name 与 age 赋值给反掉了；而用对象则不存在这个问题

//但是如果用对象，我们想给他加一个默认值该怎么做呢？

function Person3(option) {
option = option || {};
this.age = option.age || 99;
this.name = option.name || 'congjun';
this.say = function () {
console.log ("my name is "+this.age+",my name is "+this.name+'.');
//console.log ("my name is "+person.age+",my name is "+person.name+'.');
}
}
var person3 = new Person3();
person3.say();//你自己测试一下会输出什么？

/*
* 注意 || 这是一种一元判断拿 option = option || {};
* 来说对于等号右边如果option存在,就把option 赋值给等号左边的option 如果不存在则把{}赋值给等号左边的option
* */

/*
* 上面的函数叫构造函数
* 函数名首字母要大写；使用的时候前面要加一个new关键字
* 构造函数内的this 指向构造函数本身
* 普通函数呢？指向window
*
* 我们可以这个样子定义一个对象 var a = new Object(); 也可以 var a = {};
* 我们可以这个样子定义一个数组 var a = new Array(); 也可以 var a = [];
* 我们可以这个样子定义一个日期 var a = new Date(); 等等
*
* 虽然我们编程中都采用后者，因为比较简单
* 但是你要知道，他们其实都是由构造函数而来
*
* var a = new Object();拿这句来说，a 与 new Object()之间有什么关系呢？
* a 是 new Object()实例化
*
* 注意如下的表述
*
* a 会有一个__proto__属性而构造函数会有一个 prototype属性
* a 的__proto__ 会继承其构造函数的 prototype属性
* 以上是最简单的对象继承。
* 但事情远没有结束
*
* 因为a 的构造函数有可能会是某个构造构造函数的实例
* 而某个构造函数还可能是其它构造函数的实例
* 这个样子一层层的存在一个继承关系
* 最顶端是什么呢？
* 那就是Object对象，到Object 就结束了
* 层层的继承像链一样，我们叫原形链
* 必须完全搞懂原型继承及原型链的定义。
*
* */

//第三天的题目用构造函数的方法把第二天的题目做出来z
//主要是this 原型与原型链h
/*
* 再补充一点
*
* */

function Student() {
this.age = 55;
this.teacher = 'JS';
this.major = 'math';
}
Student.prototype.coderName = "congjun";

var student = new Student();

console.log(student.coderName);//这个coderName属性就是继承而来的

//下面的代码，要理解，对于for in循环不用特别关注，但是功能还有有一些重要
for(var i in student){
console.log("所有属性包含继承："+i);
if(student.hasOwnProperty(i)){
console.log("本身自有属性："+i);
}
}

</script>
</body>
</html>

0 0

js继承 原型

js继承原型