JS面向对象：
面向对象：
--JS系统对象也是基于原型的程序
--不要修改或者添加系统对象下面的方法和属性
eg:
var arr = [1,2,3];
Array.prototype.push = function() {};
arr.push(4,5,6);
alert( arr );//1,2,3;push方法空无法添加
//push:方法的封装
var arr = [1,2,3];
Array.prototype.push = function() {
for(var i=0;i<arguments.length;i++) {
this[this.length] = arguments[i];
}
return this.length;
};
arr.push(4,5,6);
alert( arr );
1.包装对象：基本的类型都有自己对应的包装对象：
String Number Boolean
Q1:str不是对象为何有一些方法？
字符串所对应的方法是在str的包装对象。
eg:
var str = 'hello';
str.chart(0);//基本类型会找到对应的包装对象，然后把包装对象的所有属性和方法给了基本类型，然后包装对象消失。
eg:
var str = 'hello';//基本类型
str.number = 10;
//在基本类型对应的包装类型下创建对象添加10，然后消失
alert(str.number);//undefined;str.number 又去创建对象，但找不到对应包装对象
2.原型链：
--实例对象与原型之间的链接(_proto_);
原型链的最外层是Object；
function Aa() {};
Object.prototype.num = 30;
var a1 = new Aa();
alert(a1.num);//
3.面向对象的一些属性和方法：
1).hasOwnProperty:对象自身下的属性，是在Object下面的属性。...alert( arr.hasOwnProperty(num) == Object.prototype.hasOwnProperty );//ture
var arr = [];
arr.num = 10;
Array.prototype.num2 = 20;
alert( arr.hasOwnProperty(num) );//ture;
alert( arr.hasOwnProperty(num2) );//false;所有对象下的属性并不是arr下的属性
2).constructor:查看对象的构造函数
function Aa() {}
var a1 = new Aa();
alert(a1.constructor);//函数
用来判断等:
var arr = [];
alert(arr.constructor == Array);//true;
如果写一个函数程序会自动添加一个原型的构造函数：Aaa.prototype.constructor = Aaa;
eg:
function Aa() {}
Aa.prototype.constructor = Array;
var a1 = new Aa();
alert(a1.constructor);//弹出Array函数
但实际不要改。。。
不经意间会修改constructor
eg:
function Aa() {}
1/*Aa.prototype.name = "Wunworld";
Aa.prototype.age = 23;*/
2/*Aa.prototype = {
name : "Wunworld",
age : 23
}*/
var a1 = new Aa();
alert(a1.constructor);
//两种结果完全不一样：1弹出函数，2弹出的是对象Object的函数，赋值修改了constructor。如果采用第二种写法在对象中要添加constructor的指向。
Aa.prototype = {
constructor : Aa,
name : "Wunworld",
age : 23
}//这样不会修改。。
3)instancof:对象与构造函数在原型链上是否有关系(是不是在同一原型链上)
4)toString();系统对象下自带的，自己写的对象都是通过原型链找到Object下面的。
作用：1> 把对象转换成字符串
var arr = [1,2,3];
alert(arr.toString());//"1,2,3" var arr = [1,2,3];
Array.prototype.toString = function(){
return this.join("+");
}
alert(arr.toString());//"1+2+3"
2> 数字进制的转换：
var num = 255;
alert(num.toString(16));//FF var num = 255;
alert(num.toString(16));//FF
3> 做类型判断
var arr = [];
alert(Object.prototype.toString.call(arr));[object Array] alert(Object.prototype.toString.call(arr) == "[object Array]");//true
判断一个对象的方法(3中);
alert(arr.constructor == Array);//true
alert(arr intanceof Array);//true
alert(Object.prototype.toString.call(arr) == "[object Array]");//true
4.面向对象的继承：拷贝式继承
继承：在原有对象的基础之上，做一些修改，得到一个新的对象，不影响元有对象的功能。子类不影响父类，子类可以继承父类的一些功能，实现代码的复用。
属性的继承：调用父类的构造函数用.call改变this的指向。
方法的继承：父类的原型直接赋值（深赋值）该子类的原型，for in 拷贝继承
function CreatePerson(name,sex) {//父类
this.name = name;
this.sex = sex;
}
CreatePerson.prototype.showName = function() {
alert( this.name );
}
var person1 = new CreatePerson("xiaoming","男")；
person.showName();
function CreateStar(name,sex,job) {//子类
CreatePerson.call(this,name,sex);//this指向window前面没调用对象,用call改变this的指向。
this.job = job;
}
/*CreateStar.prototype = CreatePerson.prototype;*/ //引用类型，只要修改一个会影响另一个的值解决办法对象类型的深复制；
extend(CreateStar.prototype, CreatePerson.prototype);//调用对象深复制函数
var person2 = new CreatePerson("Wunworld","男","job");
person2.showName();//继承过来了
function extend(obj1,obj2){
for(var attr in obj2) {
obj1[attr] = obj2[attr];
}
}
案例之面向对象demo；
HTML：
<style>
*{margin:0;padding:0;}
#div1{width:100px;height:100px;position: absolute;background:red;}
#div2{width:100px;height:100px;position: absolute;left:100px;background:yellow;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
function Drag(id) {
this.obj = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}
Drag.prototype.init = function() {
var that = this;
this.obj.onmousedown = function(ev) {
var ev = ev || window.event;
that.FnDown(ev);
document.onmousemove = function(ev) {
var ev = ev || window.event;
that.FnMove(ev);
}
document.onmouseup = function() {
that.FnUp();
}
return false;
}
}
Drag.prototype.FnDown = function(ev) {
this.disX = ev.clientX - this.obj.offsetLeft;
this.disY = ev.clientY = this.obj.offsetTop;
}
Drag.prototype.FnMove = function(ev) {
this.obj.style.left = ev.clientX - this.disX + "px";
this.obj.style.top = ev.clientY - this.disY + "px";
}
Drag.prototype.FnUp = function() {
document.onmousemove = null;
document.onmouseup = null
}
function ChildDrag(id){
Drag.call(this,id);//属性的继承
}
extend(ChildDrag.prototype,Drag.prototype);//方法的继承
ChildDrag.prototype.FnMove = function(ev) {//方法的重写
var L = ev.clientX - this.disX;
var T = ev.clientY - this.disY;
if(L<0) {
L = 0;
}else if(L > document.documentElement.clientWidth - this.obj.offsetWidth) {
L = document.documentElement.clientWidth - this.obj.offsetWidth;
}
if(T < 0) {
T = 0;
}else if(T > document.documentElement.clientHeight - this.obj.offsetHeight) {
T = document.documentElement.clientHeight - this.obj.offsetHeight;
}
this.obj.style.left = L + "px";
this.obj.style.top = T + "px";
}
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
var d1 = new Drag("div1");
d1.init();
var d2 = new ChildDrag("div2");
d2.init();
5.继承的其他形式：
1).类式继承：利用构造函数继承
JS：是没有类的概念，把JS中的构造函数看作是类。属性和方法的继承要分开。
eg:
function Aa(){//父类
this.name = "Wunworld";
}
Aa.prototype.showName(){
alert(this.name);
}
function Bb(){}//子类
Bb.prototyppe = new Aa();//重点
Bb.prototype.constructor = Bb;
var b1 = new Bb();
b1.showName();//子类继承了父类的方法和属性
通过创建父类的实例赋值给子类的原型，然后创建子类的实例，但这样做有问题，修改了b1的指向，alert(b1.constructor),时会弹出Aa();函数。所以在上述还要修改指向问题。
Bb.prototype.constructor = Bb;即可。但是，要区分开方法和属性的继承。
var F = function() {}
F.prototype = Aa.prototype;
Bb.prototyppe = new F();//重点
Bb.prototype.constructor = Bb;//以上是方法的继承
方法的继承原理：通过创建一个空构造函数，把父类的原型赋值给创建的构造函数的原型上，生成一个构造函数的实例赋值给子类的原型，再修改子类原型的构造指向即可。
子类的继承同样用 父类.call(this);
2).原型继承：借助原型来实现对象继承对象
eg:
var a = {
name : "Wunworld"
}
var b = cloneObj(a);
alert(b.name);
function cloneObj(obj) {
var F = function(){};
F.prototype = obj;
return new F();
}
原理：对象之间的继承，通过调用继承函数，继承函数的原理，利用空函数实现属性的赋值继承，通过原型链的访问实现继承。
三种继承的总结：
1.拷贝式继承：通用型，有没有new都可以使用
2.类式继承：利用new构造函数继承
3.原型继承：对象之间的继承
JS面向对象：的更多相关文章
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS面向对象（1） -- 简介，入门，系统常用类，自定义类，constructor，typeof，instanceof，对象在内存中的表现形式
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- js面向对象的实现（example 二)
//这个方法和上篇文章(js面向对象的实现(example 一))中的方法类似,但是更为简洁 //通过函数赋值的方式来构造对象 //同样通过闭包的方式来封装对象及内部变量 (function () { ...
- 浅谈JS面向对象之创建对象
hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...
- js面向对象，有利于复用
需求:在网页上添加个天气预报. 以前总是在需要执行js的地方,直接写function(){}.在需要同样功能的地方直接copy,或者稍微修改. 然后在网上看看有没有好点的方法,然后就看到js面向对象编 ...
- JavaScript基础精华02(函数声明，arguments对象，匿名函数，JS面向对象基础)
函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) { return i1 + i2;//如果不写return返回 ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
随机推荐
- mac ssh报错处理
总结一下 1.The authenticity of host '[192.168.1.100]:22 ([192.168.1.100]:22)' can't be established. RSA ...
- STM32中断名词
1.NVIC的优先级概念 占先式优先级 (pre-emption priority): 高占先式优先级的中断事件会打断当前的主程序/中断程序运行— —抢断式优先响应,俗称中断嵌套. ...
- CSU 1506 Double Shortest Paths
1506: Double Shortest Paths Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 49 Solved: 5 Description ...
- 137 - ZOJ Monthly, November 2014 - J Poker Face
Poker Face Time Limit: 2 Seconds Memory Limit: 65536 KB As is known to all, coders are lack of ...
- 洛谷 P1754 球迷购票问题
P1754 球迷购票问题 题目背景 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的 ...
- HTML学习----------DAY1 第三节
本章通过实例向您演示最常用的 HTML 标签. 提示:不要担心本章中您还没有学过的例子,您将在下面的章节中学到它们. 提示:学习 HTML 最好的方式就是边学边做实验.我们为您准备了很好的 HTML ...
- poj 1681 Painter's Problem(高斯消元)
id=1681">http://poj.org/problem? id=1681 求最少经过的步数使得输入的矩阵全变为y. 思路:高斯消元求出自由变元.然后枚举自由变元,求出最优值. ...
- 百度地图SDK for Android【Demo兴趣点搜索】
百度地图SDK为开发人员提供了便捷的检索服务. 今天我将为大家介绍Poi检索相关的内容. 首先,我们要构建一个最主要的地图应用.详细介绍请參考:百度地图SDK for Android[ ...
- poj3169 差分约束系统
题意: 从1到n,n个数,从左向右依次排列. 给定两种形式的约束条件: 1.xi与yi的最大距离为dk 2.xi与yi的最小距离为dk 问满足这些限定条件的情况下,数1和n的最大距离是多少?(若约束条 ...
- Docker Network Configuration 高级网络配置
Network Configuration TL;DR When Docker starts, it creates a virtual interface named docker0 on the ...