JS中的面向对象浅浅了解

155 阅读2分钟

JS中的面向对象

面向对象的概念:

1)一切事物皆对象

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

3)信息隐藏

字面量形式构造对象

var person = {
	name:”nice”,
	age:26,
	eat:function(){
		alert(”超会吃”)
	}
}
person.height = 175;

函数构造器构造对象

function Person(){}
Person.prototype = {
	name:”nice”,
	eat:function(){
		alert(”eat”)
	}
}
var p = new Person();

JS面向对象

JS里面没有类,可以用function模拟类的概念

function People(){}
People.prototype.say = function(){
	alert(”hello”);
}
function Student(){}
Student.prototype = new People();//继承
var s = new Student();
s.say();//弹出“hello”
function People(){}
People.prototype.say = function(){
	alert(”hello”);
}
function Student(){}
Student.prototype = new People();
Student.prototype.say = function(){//复写父类方法
	alert(”Stu-hello”);
}
var s = new Student();
s.say();//弹出“stu-hello”
function People(){}
People.prototype.say = function(){
	alert(”hello”);
}
function Student(){}
Student.prototype = new People();
var superSay = Student.prototype.say;//***调用父类方法
Student.prototype.say = function(){
	superSay.call(this);//***父类方法的执行
	alert(”stu-hello”);
}
var s = new Student();
s.say();//依次弹出“hello” “stu-hello”

有参数

function People(name){//*
	this._name = name;//*
}
People.prototype.say = function(){
	alert(”peo-hello” + this._name);//*
}
function Student(name){//*
	this._name = name;//*
}
Student.prototype = new People();
var superSay = Student.prototype.say;
Student.prototype.say = function(){
	superSay.call(this);
	alert(”stu-hello” + this._name);//*
}
var s = new Student(”nice”);//*
s.say();//依次弹出“peo-hellonice” “stu-hellonice”

信息隐藏

(function(){
	var n = “ime”;//外部不能引用到n
	function People(name){
		this._name = name;
	}
	People.prototype.say = function(){
		alert(”peo-hello” + this._name +n);//*
	}
	window.People = People;//外部接口,赋给window窗口进行操作
}());//自执行函数
(function(){
	function Student(name){
		this._name = name;
	}
	Student.prototype = new People();
	var superSay = Student.prototype.say;
	Student.prototype.say = function(){
		superSay.call(this);
		alert(”stu-hello” + this._name +n);//无法访问到这个n
	}
	window.Student = Student;//外部接口
}());
var s = new Student(”nice”);//*
s.say();//弹出“peo-helloniceime”后报错,报错原因是n is not defined

另一种方式

function Person(){
	var _this = {};//把所有东西都放在对象里承载
	_this.sayHello = function(){
		alert(”Hello”);
	}
	return _this;
}
function Teacher(){
	var _this = Person();//继承
	return _this;
}
var t = Teacher();
t.sayHello();//弹出“Hello”
function Person(){
	var _this = {};
	_this.sayHello = function(){
		alert(”Hello”);
	}
	return _this;
}
function Teacher(){
	var _this = Person();
	_this.sayHello = function(){//复写父类的方法
		alert(”Thello”);
	}
	return _this;
}
var t = Teacher();
t.sayHello();//弹出“Thello”
function Person(){
	var _this = {};
	_this.sayHello = function(){
		alert(”Hello”);
	}
	return _this;
}
function Teacher(){
	var _this = Person();
	var surperSay = _this.sayHello;//调用父类方法
	_this.sayHello = function(){
		superSay.call(_this);//父类方法的执行
		alert(”Thello”);
	}
	return _this;
}
var t = Teacher();
t.sayHello();//依次弹出“Hello” “Thello”
function Person(name){//传参
	var _this = {};
	_this._name = name;//*
	_this.sayHello = function(){
		alert(”Hello” + _this._name);//*
	}
	return _this;
}
function Teacher(name){//*
	var _this = Person(name);
	var surperSay = _this.sayHello;//调用父类方法
	_this.sayHello = function(){
		superSay.call(_this);//父类方法的执行
		alert(”Thello + _this._name”);
	}
	return _this;
}
var t = Teacher(”nice”);
t.sayHello();//依次弹出“Hellonice” “Thellonice”
(function(){//封装
	var n =“ime”;//*
	function Person(name){
		var _this = {};
		_this._name = name;
		_this.sayHello = function(){
			alert(”Hello” + _this._name +n);
		}
		return _this;
	}
	window.Person = Person;//*外部接口
}());//自执行函数
function Teacher(name){
	var _this = Person(name);
	var surperSay = _this.sayHello;
	_this.sayHello = function(){
		superSay.call(_this);
		alert(”Thello + _this._name”);
	}
	return _this;
}
var t = Teacher(”nice”);
t.sayHello();//依次弹出“Helloniceime” “Thellonice”