面向对向的初体验

创建一个标签

// 传统

var p = document.createElement('p');

var txt = document.createTextNode('我是传统js创建的文字');

p.appendChild(txt);

document.body.appendChild(p);

// 面向对象 (jquery方式)

$('<p>我是jquery创建的标签</p>').appendTo('body');

面向对象的组织结构

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

			var ybixian = {

				// 获得元素

				getElem: {

					tag: function (tag) {

					},

					id: function (id) {

					}

				},

				// 设置样式相关

				css: {

					addStyle: function () {

					},

					removeStyle: function() {

					},

					addClass: function () {},

					removeClass: function() {},

					toggleClass: function() {}

				}

			};

		</script>

	</head>

	<body>

	    <div>我是一个div</div>

	</body>

	<script type="text/javascript">

		ybixian.tag( 'div' )[ 0 ].style.border = "1px solid red";

	</script>

</html>

构造函数

// 描述一个人的构造函数

    function Person(pName, pAge, pSex) {

        // 构造函数中不需要 return

        // 为对象添加成员使用 this.成员名 = 值; 这里的this指的是调用者,

        this.name = pName;

        this.age = pAge;

        this.sex = pSex;

        this.handler = function () {

            console.log('大家好,我叫:'+this.name+',今年: '+this.age+'岁了,')

        }

    }

    var p = new Person('tom', 20, '女');

    p.handler(); //大家好,我叫:tom,今年: 20岁了,

    var p2 = new Person('tim', 27, '男');

    p2.handler(); // 大家好,我叫:tim,今年: 27岁了,

原型对象与原型属性

  • 凡是函数就有属性 prototype
  • 由某一个函数 new 出来的对象，会自动链接到 该函数的 prototype
  • 凡是通过 new 出来的对象就有 _ _ proto_ _ (非标准)
function Fn(){}

var fn1 = new Fn();

// __proto__ 与 prototype 有什么区别?

// __proto__ 是站在对象的角度讨论其原型对象 (fn1)

// prototype 是站在构造函数的角度讨论原型属性, 或构造函数创建的对象的原型对象 ( Fn )

constructor属性

// 每一个对象都可以访问到一个属性

// 其中有一个是 constructor (构造器)

// 每一个对象的 constructor 属性描述的是其构造函数

function Fn(){}

var o = new Fn();

console.log(o.construtor === Fn); // true 

// 每一个对象都链接到 其 原型对象上

// 对象的 constructor 属性是其原型对象提供的

继承

  • 在js中有两种继承模型

    • 原型继承
    • 组合继承

组合继承

//  组合式继承

// 组合式继承将其他的对象中的成员加到自己身上

var o1 = {name: 'jim',age: 18,gender: '男'};

var o2 = {like: '打篮球'};

// 让o2 继承自 o1

// 将 o1 的成员加到 o2 上

for(var k in o1){

    o2[k] = o1[k]

}

// 由于 for in 循环中的对象可以随意的替代, 因此 o2 可以继承自任意的对象

// 因此, 这个继承方法称为组合式继承

// 这里希望 o2 可以继承自任意的对象. 所以为了简化继承的代码

// 给 o2 提供一个方法, 叫 extend

o2.extend = function ( obj ) {

	for ( var k in obj ) {

		this[ k ] = obj[ k ];

	}

}

o2.extend( o1 );  // 继承

o2.extend({

	id: function( id ) {

	},

	tag: function ( tag ) {

	},

	showErr: function (msg) {

		throw new Error( msg );

	}

});
原型继承
// 原型继承

// 如果需要让一个对象有某一个行为（属性，方法）,那么可以考虑将这个行为加到原型对象中，那么这个对象就继承自原型对象，获得该行为

// 什么是原型式继承

// 对象继承自其原型对象

// 所谓的原型式继承就是在 对象的 原型对象中加东西即可

// 如何使用原型对象

// 1, 利用对象的动态特性添加成员

/*

var o = {};

o.name = 'jim';

var Person = function () {};

Person.prototype.sayHello = function () {

	alert (' 哈哈哈 ');

};

*/

// 此时 原型对象是对象, 可以利用动态特性随时添加成员

// 添加的成员都会被 构造函数创建的对象所继承

// 2, 利用覆盖原型对象

//	var Person = function () {};

//	Person.prototype.sayHello = function () {

//		alert (' 哈哈哈 ');

//	};

//	Person.prototype.sayGoodbye= function () {};

//	Person.prototype.sayLove = function () {};

// ...

// 如果需要添加的内容非常多

var Person = function () {};

Person.prototype = {

    constructor: Person,

	sayHello: function() {},

	sayGoodbye: function() {},

	sayLove: function () {}

};

经典继承

var create = function( obj ) {

	if ( Object.create ) {

		return Object.create( obj );

	} else {

		function F() {}

		F.prototype = obj;

		return new F();

	}

}

var obj = {name:'ybx',age:27};

var o = create ( obj );

console.log(o); // {__proto__{age:27,name:"ybx"}}

javascript面向对象学习(一)的更多相关文章

  1. JavaScript面向对象学习笔记

    JavaScript 常被描述为一种基于原型的语言 (prototype-based language)--每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...

  2. javascript 面向对象学习（一）——构造函数

    最近在学习设计模式,找了很多资料也没有看懂,看到怀疑智商,怀疑人生,思来想去还是把锅甩到基础不够扎实上.虽然原型继承.闭包.构造函数也都有学习过,但理解得不够透彻,影响到后续提高.这次重新开始学习,一 ...

  3. javascript 面向对象学习（三）——this，bind、apply 和 call

    this 是 js 里绕不开的话题,也是非常容易混淆的概念,今天试着把它理一理. this 在非严格模式下,总是指向一个对象,在严格模式下可以是任意值,本文仅考虑非严格模式.记住它总是指向一个对象对于 ...

  4. javascript 面向对象学习（二）——原型与继承

    什么是原型? 首先我们创建一个简单的空对象,再把它打印出来 var example = {} console.log(example) 结果如下: { __proto__: { constructor ...

  5. javascript面向对象学习笔记——创建对象（转）

    工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o ...

  6. javascript面向对象学习

    1.this指向问题,指向的是当前的方法属于谁,当前的方法属于谁就指向谁!! 例子: oDiv.onclick = function () { this指向的是oDiv,因为这个方法属于oDiv } ...

  7. JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)

    一.动态原型模式 在面向对象学习六中的随笔中,了解到组合构造函数模式和原型模式创建的自定义类型可能最完善的!但是人无完人,代码亦是如此! 有其他oo语言经验的开发人员在看到独立的构造函数和原型时,很可 ...

  8. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  9. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

随机推荐

  1. Java程序设计——反转字符串 & 找朋友 & 计算int型二进制1的个数 & 情报加密 & 计算日期 & 求近似数 & 输出较小数（练习1）

    作为刚刚入门Java的选手,其实C++的功底起到了很大的作用.但是,Java之于C++最大的不同,我个人认为,是其类的多样性.才入门的我,写着老师布置的简单的面对过程的题,如果是C++,可以算是简单了 ...

  2. cocos2dx基础篇(1) Cocos2D-X项目创建

    已经入行工作半年多时间了,以前都是把这些东西记录在有道云上面的,现在抽出些时间把以前的笔记腾过来. 具体的环境配置就不用说了,因为现在已经是2018年,只需要下载对应版本解压后就能使用,不用再像多年前 ...

  3. LeetCode.1051-身高检查器(Height Checker)

    这是小川的第390次更新,第420篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第252题(顺位题号是1051).要求学生按身高递增的顺序站列来拍年度照片. 返回没有站在 ...

  4. 注解@Slf4j的作用

    lombok.extern.slf4j 代码: @Slf4j public class LogExample { } 产生以下代码: public class LogExample { private ...

  5. 【Linux 网络编程】OSI七层模型

    OSI(Open System Interconnection)开放系统互联模型(1)应用层: 应用层与应用程序界面沟通,以达到展示给用户的目的.(2)表示层: 表示层对网络传输的数据进行交换,使得多 ...

  6. Oracle 查看 impdp 正在执行的内容

    1. 今天进行数据库备份恢复 一直卡住  找了一下 公司另外一个部门的方神提供了一个方法连查看 具体在做什么操作: 2. 现象. impdp 到一个地方直接卡住不动 具体位置 view 这个地方足足卡 ...

  7. LayUI 多选框动态加载、启用、禁用、赋值、取值等js实现

    例如多选框如下: <div class="layui-form"> <select xm-select="city"> </sel ...

  8. P1216数字三角形

    这是USACO的一道记忆化搜索题,还记得原来学搜索就是被此所困. 给定n深的数,第i层有i个节点,存储有一个数字,询问从第一层走到最后一层所经过节点上数字和的最大值.我们很容易想到枚举所有路径来计算最 ...

  9. Python_2day

    选择 布尔类型.数值和表达式 注意:比较运算符的相等是两个等号,一个等到代表赋值 在Python中可以用整型0来代表False,其他数字来代表True 后面还会讲到 is 在判断语句中的用发 In [ ...

  10. elasticsearch系列一elasticsearch（ES简介、安装&配置、集成Ikanalyzer）

    一.ES简介 1. ES是什么? Elasticsearch 是一个开源的搜索引擎,建立在全文搜索引擎库 Apache Lucene 基础之上 用 Java 编写的,它的内部使用 Lucene 做索引 ...