<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<div id="container">hello world</div>

	<script>

		function Elem(idName) {

			this.elem = document.getElementById(idName);

		}

		Elem.prototype.html = function (val) {

			let elem = this.elem;

			if (val) {

				elem.innerHTML = val;

				return this; // 可以链式操作

			} else {

				return elem.innerHTML;

			}

		}

		Elem.prototype.on = function (type, callback) {

			let elem = this.elem;

			if (type) {

				elem.addEventListener(type, callback);

				return this;

			}

		}

		let div = new Elem('container');

		console.log(div.elem); // 获取当前元素

		console.log(div.html()); // 获取当前元素内容

		// div.html('你好');

		// div.on('click', function () {

		// 	alert('你好');

		// })

		// 链式操作

		div.html('你好').on('click', function () {

			alert('你好');

		})

	</script>

</body>

</html>

　　

原型与原型继承demo的更多相关文章

  1. 深入理解JS原型链与继承

    我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...

  2. js原型链与继承（初体验）

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...

  3. 对于js原型和原型链继承的简单理解（第一种，原型链继承）

    原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解.来判断被面试者对js的熟悉程度. 原型的定义 Js所有的函数都有一个prototype属性,这个属性引 ...

  4. JavaScript原型链与继承

    最近学习了<Javascript高级程序设计>面向对象部分,结合书中的例子总结一下原型链和继承部分的内容. 创建对象 在Js当中没有类这个概念,当我们想要创建具有相同属性的对象的时候,有如 ...

  5. js面向对象小结（工厂模式，构造函数，原型方法，继承）

    最近过了一遍尼古拉斯泽卡斯的高级程序设计第三版(红皮书)第六章:面向对象程序设计,现在把总结出来的东西和大家分享一下. 主要内容如下: 1.工厂模式 2.构造函数模式 3.原型模式 4.继承 一.工厂 ...

  6. 《JAVASCRIPT高级程序设计》根植于原型链的继承

    继承是面向对象的语言中,一个最为津津乐道并乐此不疲的话题之一.JAVASCRIPT中的继承,主要是依靠原型链来实现的.上一篇文章介绍过,JAVASCRIPT中,每一个对象都有一个prototype属性 ...

  7. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

  8. js 原型，原型链，原型链继承浅析

    对于网上的关于原型,原型链和原型链继承的晦涩语言说明就不累赘了,复制粘贴过来再解释一遍怕自己也整蒙了,本人最怕空气突然安静,四目对视,大眼对小眼,一脸懵逼. 我们先看下面

  9. 再谈javascriptjs原型与原型链及继承相关问题

    什么是原型语言 只有对象,没有类;对象继承对象,而不是类继承类. “原型对象”是核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己创建时和运行时定义的属性,而且可以 ...

  10. JavaScript原型链及继承

    在JavaScript中,所有的东西都是对象,但是JavaScript中的面向对象并不是面向类,而是面向原型的,这是与C++.Java等面向对象语言的区别,比较容易混淆,因此把我自己学习的过程记录下来 ...

随机推荐

  1. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  2. Sublime Text 3 配置 sass

    先安装Sublime Text的sass 和 sass build插件, Sublime Text新建一个test.scss文件 $color: #369;  body {     backgroun ...

  3. vue路由的四种传值

    第一种:props 配置: 组件内定义: props: ['id'] 路由映射配置,开启props:true : { path: '/user/:id', component: User, props ...

  4. Python-14-抽象及关键字参数

    可使用内置函数callable判断某个对象是否可调用 >>> import math >>> x = 1 >>> y = math.sqrt &g ...

  5. MySQL库相关操作

    ========MySQL库相关操作====== 一.系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信 ...

  6. NOI2015品酒大会 后缀数组

    自己尝试敲后缀数组,发现难看(tiao)的不行,于是抄了板子 考虑建出hei以后转化出的问题: 对于一个数组中权值大于等于k的连续部分,求取两个数的方案数和两数积的最大值 (好气啊,可以有负数) 把询 ...

  7. Java泛型-通配符的上限和下限问题

    Java的泛型中,通配符可以设置上限和下限. 上限:<? extends T> ?是T和T的子类 下限:<? super T> ?是T和T的父类 怎么看待这个上限和下限呢 首先 ...

  8. Hive进阶_Hive数据查询

    简单查询和fetch task 简单查询:   简单查询的 fetch task 功能,从HDFS拉取,不用map reduce. 前两种配置,当前session有效.修改hive-site.xml永 ...

  9. NET Core准备：使用Hyper-V安装Ubuntu Server 16.10

    NET Core准备:使用Hyper-V安装Ubuntu Server 16.10 概述 Hyper-V是微软的一款虚拟化产品,和VMWare一样采用的hypervisor技术.它已经被内嵌到Win1 ...

  10. Sam's Numbers 矩阵快速幂优化dp

    https://www.hackerrank.com/contests/hourrank-21/challenges/sams-numbers 设dp[s][i]表示产生的总和是s的时候,结尾符是i的 ...