<!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. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  2. Java工程打包成jar可执行文件

    将一个工程中的类打包成jar文件,步骤参考如下: 1.选择file -> project structure 2. 选择Arifacts->JAR->form modules wit ...

  3. String 中配置文件详解

    <context:component-scan>使用说明 http://blog.csdn.net/chunqiuwei/article/details/16115135

  4. 爬虫（Xpath）——爬tieba.baidu.com

    工具:python3 核心知识点: 1)lxml包不能用pip下载,因为里面有其他语言编写的文件 2)urlopen返回的请求是html文件,要使用 content = etree.HTML(html ...

  5. HDU 1069 Monkey and Banana DP LIS变形题

    http://acm.hdu.edu.cn/showproblem.php?pid=1069 意思就是给定n种箱子,每种箱子都有无限个,每种箱子都是有三个参数(x, y, z)来确定. 你可以选任意两 ...

  6. openstack安装newton版本keyston部署（一）

    一.部署环境:     两台centos7,  内存2G 控制计算节点: Hostname1:                    ip:172.22.0.218 计算节点及存储节点 Hostnam ...

  7. Ubuntu 16.04 以太坊开发环境搭建

    今天我们来一步一步从搭建以太坊智能合约开发环境. Ubuntu16.04 安装ubuntu16.04.下载链接 //先update一下(或者换国内源再update) sudo apt-get upda ...

  8. Java输入输出流简单案例

    package com.jckb; import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io. ...

  9. Spring MVC 示例

    Srping MVC项目结构如下: 一.首先创建一个Dynamic Web Project 二.WebContent/WEB-INF/文件夹下新增 web.xml,配置servlet 容器对于web. ...

  10. EF 记录执行的sql语句

    最近做了个中等的项目,数据不会很多,开发时间比较紧迫,所以用了EF的框架. 在使用过程中,发现有时候执行的结果不如预期,想看看执行的sql语句为何,遍查找资料,在网上找到了相关辅助类,拿来使用,部署到 ...