JavaScript的面向对象

JavaScript的面向对象

1 什么是面向对象?

    面向对象本身就是一种处理问题的思路,是对传统面向过程编程的一种补充和完善;核心是类和对象的抽象封装和创建,通过创建的各种对象之间互相协作(互相调用函数)完成一个功能的完整流程;通过面向对象的三大特征封装、继承、多态,来提高程序的健壮性、代码的复用性和功能的强大的扩展性。

2 JS中如何得到对象?

2-1 通过 new Object

var people=new Object();
people.name="含恩静";
people.age=29;
people.say=function(){
    alert("我的名字是"+this.name+",我今年"+this.age+"岁了")
};
people.say();

2-2 使用json

var people={}
  name="含恩静",
  age=29,
  say=function(){
    alert("我的名字是"+this.name+",我今年"+this.age+"岁了")
}
people.say();

2-3 工厂模式

function createObject(name,age,sex,color) {
    var wow = new Object();
    wow.name = name;
    wow.age = age;
    wow.sex = sex;
    wow.color = color;
    wow.say = function() {
        alert("我的名字是:"+this.name);
    }
}	
var p1 = createObject("含恩静",29,"女","黄色");

2-4 构造函数

function People(name,age,sex) {
	this.name = name;
	this.age = age;
	this.sex = sex;
	this.say = function() {
		alert("我的名字是:"+this.name);
	}
}
		
		
var p1 = new People("含恩静",29,"女");
var p2 = new People("全包蓝",16,"女");
p1.say();	
p2.say();

3 面相对象的语言特征

3-1 封装

3-1-1 Javascript的原型(prototype)

首先来看一段代码:

//定义了一个对象
 function People() { } 
//使用原型来给对象赋值 
//这样就讲一个对象的属性和方法放在了该对象的原型中 
//外界是无法访问到这样数据的 
People.prototype.name = "刘帅哥";
People.prototype.age = 18; 
People.prototype.say = function() { alert("我的名字是:"+this.name+",我今年"+this.age+"岁了"); } var p1 = new People();
p1.say();//正常访问say();//报错

    这样我们发现window就无法访问到 say方法了,此时 says方法只属于People对象独有的方法。很好解决了封装破坏的情况。


什么是原型?

    原型是js 中非常特殊一个对象,当一个函数创建之后,会随之产生一个原型对象,当通过这个函数的构造创建了一个具体对象之后,在这个具体的对象中就会有一个属性指向选型。这就是这就是原型的概念。

    看下面的代码:

//第一种状态 
//定义了一个对象 
function People() { } 
//第二种状态,这样赋值就会赋在原型对象中 
//使用原型来给对象赋值 
//这样就讲一个对象的属性和方法放在了该对象的原型中 
//外界是无法访问到这样数据的 
People.prototype.name = "含恩静"; 
People.prototype.age = 29; 
People.prototype.say = function() { 
     alert("我的名字是:"+this.name+",我今年"+this.age+"岁了");
}
//第三种状态 
var p1 = new People(); 
//此时调用的是原型中的,因为自己中没有这些属性和方法 
p1.say();//正常访问了 


// say();//报错了 
//可以通过如下的方式检测p1是不是指向People的原型对象 
//    alert(People.prototype.isPrototypeOf(p1)) 
var p2 = new People();
p2.name = "全宝蓝";
p2.age = 16; 
p2.say();
    可以结合图形来看:

原型重写:

如果我们的对象中存在大量的属性或者方法的时候,要写大量的[对象.prototype.属性名]这样的代码,我们可以使用json的方式来写:


function People() { } 
People.prototype = { 
    name : "含恩静", 
    age : 29, 
    say : function() { 
         alert("我的名字是:"+this.name+",我今年"+this.age+"岁了"); 
    } 
} 
var p1 = new People(); 
p1.say(); 
var p2 = new People(); 
p2.name = "全宝蓝"; 
p2.age = 16; 
p2.say();


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值