JS(javaScript)——4面向对象
Js没有真正意义的面向对象,只有浅层意义的;
类里面有两个要素:属性和方法
- prototype
案例:
/**
创建对象的第二种方式
*/
function testObj_2() {
/* js中也有object */
var obj = new Object();
/* 相当于java中的toString
[object Object]:这说明此类型是一个Object
*/
console.log("==toString==" + obj);
console.log("==typeof==" + typeof obj);
/* 再也不能一开始的时候就定义属性和方法
需要后加因为obj是new出来的
*/
obj.id = "10";
obj.age = 20;
obj.name = "张三";
console.log("==id==" + obj.id);
console.log("==age==" + obj.age);
/* 删除属性 */
delete obj.id ;
console.log("==id==" + obj.id);
for (var temp in obj){
console.log(temp+"--------->"+obj.temp);
}
}
/**
创建对象的第二种方式
*/
function testObj_2() {
/* js中也有object */
var obj = new Object();
/* 相当于java中的toString
[object Object]:这说明此类型是一个Object
*/
console.log("==toString==" + obj);
console.log("==typeof==" + typeof obj);
/* 再也不能一开始的时候就定义属性和方法
需要后加因为obj是new出来的
*/
obj.id = "10";
obj.age = 20;
obj.name = "张三";
console.log("==id==" + obj.id);
console.log("==age==" + obj.age);
/* 删除属性 */
delete obj.id ;
console.log("==id==" + obj.id);
for (var temp in obj){
console.log(temp+"--------->"+obj[temp]);
}
}
即可获取到值:
/**
有类,有对象
有两个对象:
属性不一样
方法一样
*/
function Person(name,age){
this.age = age;
this.name = name;
this.say = function(){
console.log("========")
}
}
/* 此代码没有放到某个函数(方法),所以一加载就执行 */
var p1 = new Person("张三",30);
var p2 = new Person("李四",40);
/* 对象的属性不一样 输出结果:张三==name==李四*/
console.log(p1.name+"==name=="+p2.name);
/*对象的方法应该是一样的
方法没有加小括号
*/
console.log(p1.say+"==say=="+p2.say)
console.log("方法的双等号"+(p1.say==p2.say))
/* 原型:prototype;所有的对象共用一份资源:(有点像static)
两份资源,不管是普通的还是prototype,都可以使用
*/
Person.prototype.hello = function()
{
console.log("===hello==");
}
console.log("方法的双等号:"+ (p1.hello == p2.hello));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js_04_object</title> <script type="text/javascript"> /* 测试对象 */ function testObj() { /* json字符串 键的双引号,可写可不写;建议写上去
对象的属性一开始就定义
有缺点:如果想创建两个对象,对象的属性不同,方法相同;此功能无法实现 */ var obj_1 = { /* :左边的是键,右边的是值 */ "id":1, name:"张三", "age":"10", "say":function() { console.log("==say=="); /* 加一个返回值 this:指的是调用者 */ return "id:" + this.id + ";name:" + this.name + ";age:" + this.age + ";say:" + this.say ; } } ; console.log("--obj==" + obj_1); console.log("--obj==" + obj_1.id); console.log("==obj==say===" + obj_1.say()); /* 为obj_1增加属性和方法 */ obj_1.sex = "男" ; obj_1.hello = function () { console.log("==hello==="); } console.log("--obj=sex=" + obj_1.sex); /* 没有返回值,一般只是调用,返回值不用,用不着 */ obj_1.hello(); }
/** 创建对象的第二种方式 */ function testObj_2() { /* js中也有object */ var obj = new Object(); /* 相当于java中的toString [object Object]: 这说明此类型是一个Object */ console.log("==toString==" + obj); console.log("==typeof==" + typeof obj); /* 再也不能一开始的时候就定义属性和方法 需要后加 obj是new出来的 */ obj.id = "10"; obj.age = 20; obj.name = "张三"; console.log("==id==" + obj.id); console.log("==age==" + obj.age); /* 删除属性 */ delete obj.id ; console.log("==id==" + obj.id);
/* 遍历对象中的所有属性 */ for(var temp in obj) { /* 使用方法怎么想数组呢? js底层存储对象的时候,使用的就是数组 */ console.log(temp + "---->" + obj[temp]) }
/* 判断此对象里面有没有此属性 如果返回的有值,那就是此属性 如果返回的是undefined:表示此对象中没有此属性 */ console.log("=age==" + obj.agasdfae); console.log("==hasOwnProperty==" + obj.hasOwnProperty("agdde")) }
/** 有类,有对象
有两个对象. 属性不一样 方法一样 */ function Person(name,age) { this.age = age ; this.name = name ; this.say = function() { console.log("===say=="); } }
/* 此代码没有放到某个函数(方法),所以一加载就执行 */ var p1 = new Person("张三",30); var p2 = new Person("李四",40);
/* 对象的属性不一样 */ console.log(p1.name + "==name==" + p2.name) /*对象的方法应该是一样的 方法没有加小括号 */ console.log(p1.say + "====" + p2.say); console.log("方法的双等号:"+ (p1.say == p2.say));
/* 原型:prototype;所有的对象共用一份资源:(有点像static) 两份资源,不管是普通的还是prototype,都可以使用 */ Person.prototype.hello = function() { console.log("===hello=="); } console.log("方法的双等号:"+ (p1.hello == p2.hello));
/* prototype里面的方法或者属性和普通的方法和属性一样 js会先调用自己内部的属性或者方法 如果内部没有,再调用prototype里面的. */ Person.prototype.say = function() { console.log("=prototype==say=="); } p1.say(); </script> </head> <body> <button οnclick="testObj()">创建对象_1</button> <button οnclick="testObj_2()">创建对象_2</button> </body> </html> |