web前端学习(四)JavaScript学习笔记部分(9)-- JavaScript面向对象详解

时间:2022-10-10 14:42:58

1、认识面向对象

1.1、概念

  1.一切事物皆是对象

  2.对象具有封装和继承特性

  3.信息隐藏(类的信息隐藏,包括属性和方法)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var person = {
name : "iwen",
age:30,
eat:function(){
alert("能吃");
}
}
alert(person.name);
person.eat();/*执行对象的函数时带上括号就可以执行了*/ function Person(){
/*什么都不写*/
}/*把函数当做对象使用*/
Person.prototype = {
name:"iwen",
age:30,
eat:function(){
alert("吃two");
}
}
var p = new Person();
console.log(p);
alert(p.age + `,`+p.name);
p.eat();
</script>
</body>
</html>

2、面向对象(一)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// alert(`wocao???`);/*测试alert能不能用反引号,结果是可以的*/
(function(){
var n = "testName";/*在进行封装之后只能在封装包内部进行使用,子类无法进行访问n的动作,访问的时候会出错*/
function People(name){
this.name = name;
/*使用this指定的属性是子类在继承父类之后可以进行访问的属性*/
var ParentElement1 = "testParentElement1";
this.ParentElement3 = "testParentElement3"
}
People.prototype.ParentElement2 = "testParentElement2";
People.prototype.say = function(){
alert("people-hello " + this.name);
}
window.People = People;/*将People对象赋值给window,在封装起来之后才可以使用,让子类进行继承*/
}());/*记得这里要加一个分号*/
/*这里不加外面那一层小括号会让你添加函数名,不然就出错,这里是执行这个函数的意思*/ /*alert(People);*//*这里很奇怪,能够直接看到People这个函数对象的内容*/ //alert(People.prototype.ParentElement1);/*undefined*//*不是类的属性名不能够访问,子类也无法访问,详情见下面子类访问ParentElement1*/
alert(People.prototype.ParentElement2);/*这样写才能够访问属性*//*这里是在父类外部添加进去的属性*/
//alert(People.prototype.ParentElement3);/*undefined*//*不是继承过他的子类其他人无法访问这个属性*/
alert(People.prototype.name);/*--------*//*undefined*//*不是继承过他的子类其他人无法访问这个属性*/ function Student(name){
this.name = name;
}
Student.prototype = new People();
var superSay = Student.prototype.say;
var superTestParentElement1 = Student.prototype.ParentElement1;/*/*undefined*//*不是类的属性名不能够访问,子类也无法访问,详情见下面子类访问ParentElement1*/
var superTestParentElement3 = Student.prototype.ParentElement3;
Student.prototype.say = function(){
superSay.call(this);
alert(`student-hello `+this.name+` `+n+` `+superTestParentElement1+ ` `+ superTestParentElement3);
}
var s = new Student("iwen");
s.say(); /*2#
楼主需要看情况实现哈!你在new一个子类对象的时候,需要先调用父类的相关构造器,对父类中的字段进行初始化操作!
如果父类中的字段的权限修饰符声明为private的,那么子类将不能获知父类中该字段的任何信息(就如同不存在一样)。
别的权限声明情境下,如果子类定义了一个和父类同名的字段,那么子类实例每次获取的都将是子类中声明的同名字段,
如果想要调用父类中的同名字段,需要使用super关键字进行调用。当然如果子类和父类中同名字段存储的值不一样,
那么取得的值自然也是不同的(具备不同的内存区间)。这个时候能够达到楼主想要的需求!!如果子类中没有与父类同名的字段,
那么子类将通过继承获得父类的该字段,对子类的该字段的操作当然也会被保存起来的!!*/ /*4#
你可以用2个子类一起继承一个父类,然后用子类1调用父类的属性,改变值,再用子类2调用看值改变了没有,
明显答案是没有。。不可能彻底改变父类的值,如果能改变那程序都乱跑了。。。子类不能彻底改变父类的值,
只能调用父类的属性重新赋值罢了。。*/ </script>
</body>
</html>

3、面向对象(二)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
(function(){
var n = "ime";
function Person(name){
var _this = {};
_this._name = name;
_this.sayHello = function(){
alert("PersonHello" + _this._name + n);
}
return _this;/*返回这个函数对象,这一句实现了这整个类的定义工作*/
}
window.Person = Person;
}()); function Teacher(name) {
var _this = Person(name);
var superSay = _this.sayHello;
_this.sayHello = function(){
superSay.call(this);/*调用自己的时候这样写是不能够在superSay后面加括号的*/
alert("TeacherHello"+_this._name);
}
return _this;
}
var t = Teacher("zhangjie");
t.sayHello(); t.testProperty = "原来如此";/*这种临时加的对象属性也是可以的,后面可以打印出来*/
alert(t.testProperty);
</script>
</body>
</html>