面向对象的小九九

最新推荐文章于 2024-06-09 20:17:27 发布
最新推荐文章于 2024-06-09 20:17:27 发布
阅读量89 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000015377875
版权

面向对象

本人能力有限，有误请斧正

本文旨在复习面向对象(不包含es6)

本文学习思维

  1. 创建对象的方式，获取对象属性
  2. 构造函数,构造函数的new 做了什么
  3. 原型与原型对象
  4. 原型链
  5. 继承(借用构造继承、原型继承、组合继承、寄生组合继承)

获取对象属性的三个方法

  1. for...in..
  2. Object.keys() ie9以上放心使用

keys的支持

  1. Object.getOwnPeropertyNames 会把所有属性枚举出来(如数组的length)

创建对象的方法

  1. 字面量 var o = {};
  2. 构造函数 var o = new Object()
  3. Object.create() var o = Object.create( )

object.create()有两个参数第一个是要新创建对象的原型对象, 第二个可选：自己定义的属性,需要配置麻烦一般不用,返回一个新对象，带着指定的原型对象和属性

通过给Object.create()参数传null可以获得一个纯净的没有原型的对象。原因是null是原型链的链末

输出查看原型链发现create在创造一个对象会存在传入的属性与方法
这个方法太适合继承了,他会直接继承传入的属性和方法
通过测试传入{}时,也会存在Object.__proto__ 指向 Object.__proto__;

// Object.create() 实现方式 
// 实际这个是原型式继承的核心
var object = function(proto){
    var F = function(){}; // 创建一个对象
    F.prototype = proto; //变量原型指向传入对象
    return new F();
}

构造函数、实例、原型、原型链

参考资料：MDN-继承与原型链

构造函数：

  1. 是一个函数
  2. 首字母大写
  3. 使用new关键字创建

构造函数(函数声明或者函数表达式)本质还是函数,只是用来创建对象,还有个惯例就是首字母大写

// 构造函数
function Person(){}
// 调用构造函数，创建对象
var p1 = new Person();

为什么说构造函数特殊呢,首先聊聊new关键字

参考：

  1. MDN-new运算符
  2. 高程3--p145
  3. 阮一峰博客

通过new关键字可以创建新对象！

在new一个对象的时候做了什么事？4个步骤（高程3）

  1. 创建一个新对象
  2. 将构造函数的作用域赋给新对象 (因此this就指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象(如果构造函数中返回了其他对象,则返回其他对象)
MDN简化版，只讨论过程，无法传参 
    // MND简化
    
    /*
    一个继承自 Foo.prototype 的新对象被创建。
    
    使用指定的参数调用构造函数 Foo ，并将 this 绑定到新创建的对象。
    new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
    
    由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。
    （一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）
    */
    
    var Foo = function(){};
    var _new2 = function(fn){
        var o = Object.create(fn.prototype);
        var k = fn.call(o);
        if(typeof k === 'object'){
            return k;
        }else{
            return o;
        }
    }
    var f = _new2(Foo);

MDN原型简图

阮老师的版本可以传参，而且很详细了 
    function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
      // 将 arguments 对象转为数组
      var args = [].slice.call(arguments);
      // 取出构造函数
      var constructor = args.shift();
      // 创建一个空对象，继承构造函数的 prototype 属性
      var context = Object.create(constructor.prototype);
      // 执行构造函数
      var result = constructor.apply(context, args);
      // 如果返回结果是对象，就直接返回，否则返回 context 对象
      return (typeof result === 'object' && result != null) ? result : context;
    }

    // 实例
    var actor = _new(Person, '张三', 28);

实例是什么

构造函数是对一个对象的抽象描述,实例则是对象的具体表现

原型对象(prototype)

好吧!大boss出场，都说javaScript最具有特色的就是原型

参考：

  1. 高程3 --p147

原型是什么?(高程3)

我们创建的每个函数都有一个prototype(原型) 属性，这个属性是一个指针，指向一个对象
  1. 函数的属性
  2. 原型指向一个对象

理解原型对象 高程3 -- p148有兴趣可以去读一下

无论什么时候只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性将指向函数的原型对象。在默认情况下，所有的原型对象会自动获得一个constructor(构造函数)属性，这个属性包含一个指向prototype属性所有函数的指针。通过这个构造函数，我们还可以继续为原型对象添加其他属性和方法

按照书上的理解：
MDN-prototype示意

简述：（[[Prototype]] === __proto__）

  1. 所有构造函数有一个属性指向原型对象(prototype)
  2. 所有由构造器生成的实例对象中有个__poroto__指向原型对象
  3. 原型对象中都有一个constructor的属性，指向构造函数
        var Person = function() {};
        Person.prototype.age = 1;
        var p = new Person();
        var p2 = new Person();
        console.log(p.__proto__ === Person.prototype); // true
        console.log(p2.__proto__ === Person.prototype); // true
        console.log(Person === Person.prototype.constructor); // true

原型链

原型链就是在查找到某个属性或者方法不断向上查找的一个过程

MDN-非常具有代表的简化原型链

// 让我们假设我们有一个对象 o, 其有自己的属性 a 和 b：
// {a: 1, b: 2}
// o 的 [[Prototype]] 有属性 b 和 c：
// {b: 3, c: 4}
// 最后, o.[[Prototype]].[[Prototype]] 是 null.
// 这就是原型链的末尾，即 null，
// 根据定义，null 没有[[Prototype]].
// 综上，整个原型链如下: 
// {a:1, b:2} ---> {b:3, c:4} ---> null

console.log(o.a); // 1
// a是o的自身属性吗？是的，该属性的值为1

console.log(o.b); // 2
// b是o的自身属性吗？是的，该属性的值为2
// 原型上也有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽 (property shadowing)"

console.log(o.c); // 4
// c是o的自身属性吗？不是，那看看原型上有没有
// c是o.[[Prototype]]的属性吗？是的，该属性的值为4

console.log(o.d); // undefined
// d是o的自身属性吗？不是,那看看原型上有没有
// d是o.[[Prototype]]的属性吗？不是，那看看它的原型上有没有
// o.[[Prototype]].[[Prototype]] 为 null，停止搜索
// 没有d属性，返回undefined

再用对象表示一个

// 属性遮蔽
function Person() {
    this.name = '111';
}
Person.prototype.name = '222';

var p1 = new Person();
console.log(p1.name); // 111
console.log(p1.__proto__.name); // 222


var p2  = new Person();
console.log(p2.age);

现在要查找p2.age属性

  1. 实例对象中有没有？没有
  2. 实例对象通过__prope__找到原型对象，原型对象中有么？没有
  3. 找到Object的原型中查找有么？没
  4. 找到null这个对象，作为作用域的链末，也没有，这个值就是undefined

原型链与属性屏蔽

属性屏蔽就是找到了就不会再找了（实例上的属性>原型链上的属性）,实际还是存在

几种能遇到的操作符

  1. in操作符
  2. isPrototypeOf()
  3. Object.getPrototypeOf()
  4. instanceof (对象)
  5. typeof

in操作符

如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。语法: prop in object

isPrototypeOf()

isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。 
function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

var baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // true
console.log(Bar.prototype.isPrototypeOf(baz)); // true
console.log(Foo.prototype.isPrototypeOf(baz)); // true
console.log(Object.prototype.isPrototypeOf(baz)); // true

instanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例。

instanceof的原理是检查右边构造函数的prototype属性，是否在左边对象的原型链上。(判断他们的地址指向是否一致)。有一种特殊情况，就是左边对象的原型链上，只有null对象。这时，instanceof判断会失真。

几点instanceof的注意

  1. 用于对象（由于instanceof的原理）
  2. 与null有关要注意
//instanceof判断会失真
var obj = Object.create(null);
typeof obj // "object"
Object.create(null) instanceof Object // false


//null作为一个特殊的Object却不属于Object创建的实例，null原型链的链末
undefined instanceof Object // false
null instanceof Object // false

// instanceof 用于对象
var str = '1'
var str2 = new String('2');
str instanceof String // false
str2 instanceof String // true

typeof

typeof 1 //number
typeof '' // string
typeof undefined //undefined
typeof true // boolean
typeof function(){} // function
typeof {}  // object
typeof []  // object
typeof null // object
typeof Symbol() //symbol ES6

继承：

继承有几种

继承小结

我用我总结了一些思维导图

  1. 创建对象
  2. 继承的优缺点

这里把继承的几种方式罗列出来方便查阅,以下大多是代码，简易的我总结在思维导图中了

1.原型(链)继承

关键点是要打通原型链
由于原型对象是函数初次创建就会存在的对象，所以会共享
共享就会存在共享问题

优点:

  1. 共享属性与方法
  2. 可以通过instanceof来判断关系

缺点:

  1. 共享问题
  2. 不能传递参数
        // 父类
        function SuperType() {
            this.property = true;
        }
        SuperType.prototype.getSuperValue = function () {
            return this.property;
        }
        
        // 子类
        function SubType() {
            this.subproperty = false;
        }
        // 继承父类 打通原型链
        SubType.prototype = new SuperType();
        SubType.prototype.getSubValue = function () {
            return this.subproperty;
        }
        
        var instance = new SubType();
        console.log(instance.getSuperValue()); // true

借用构造函数

关键在于环境变量（this）的指向，由于每次创建都会创建一个新的this所以会拥有自己的属性与方法,由于是改变this指向所以无法共享原型对象

优点:

  1. 私有属性与方法
  2. 可以传参数

缺点:

  1. 引用类型,重复创建,冗余浪费内存
  2. 无法共享
  3. 无法判断关系
        // 父类
        function SuperType() {
            this.colors = ['red'];
        }
        // 子类
        function SubType() {
            // 继承父类
            SuperType.call(this);
        }
        var instance1 = new SubType();
        colors.push('black');
        cosnole.log(instance1.colors); // red,black
        var instance2 = new SubType();
        console.log(instance2.colors); // red

组合式继承

组合了原型继承与借用构造函数继承继承了优点，但是由于组合，所以创建了两次对象，造成轻微的浪费空间

优点：

  1. 私有属性和方法
  2. 共享属性与方法
  3. 可以确认实例与构造函数之间的关系

缺点

  1. 造成内存的冗余浪费
        // 父类
        function SuperType(name) {
            this.name = name;
            this.colors = ['red'];
        }
        SuperType.prototype.sayName = function () {
            console.log(this.name);
        }
        // 子类
        function SubType(name, age) {
            // 继承属性
            SuperType.call(this, name);
            this.age = age;
        }
        // 继承方法
        SubType.prototype = new SuperType();
        SubType.prototype.sayAge = function () {
            console.log(this.age);
        }
        var instance1 = new SubType('name1', 1);
        instance1.colors.push('black');
        console.log(instance1.colors); // red,black
        instance1.sayName(); // name1
        instance1.sayAge(); // 1

        var instance2 = new SubType('name2', 2);
        console.log(instance2.colors); // red
        instance2.sayName(); // name2
        instance2.sayAge(); // 2

寄生组合继承

寄生组合继承是把原型继承给改掉，实际上就是想要父级的原型链，不一定要创建对象所以有了寄生组合继承,该继承是目前最完善的继承方式

        // 寄生继承
        function inheritPrototype(subType, superType) {
            var prototype = Object.create(superType.prototype);
            prototype.constructor = subType;
            subType.prototype = prototype;
        }
        // 父类
        function SuperType(name) {
            this.name = name;
            this.colors = ['red'];
        }
        SuperType.prototype.sayName = function () {
            console.log(this.name);
        }    
        // 子类继承
        function SubType(name, age) {
            SuperType.call(this, name);    
        }
        inheritPrototype(SubType, SuperType);
        SubType.prototype.sayAge = function () {
            console.log(this.age)
        }

参考资料：

  1. MDN-对象
  2. 冴羽的博客
  3. 阮一峰的网络日志
  4. javaScript高级程序设计第三版

阮一峰的网络日志：

  1. Javascript继承机制的设计思想
  2. Javascript 面向对象编程（一）：封装
  3. Javascript面向对象编程（二）：构造函数的继承
  4. Javascript面向对象编程（三）：非构造函数的继承
  5. 《JavaScript 标准参考教程（alpha）》，by 阮一峰
看了高程3与阮一峰老师的博客,结合起来更加好理解
weixin_34358365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js小练习（二）：实现九九乘法表
我爱吃兔兔的博客
09-24 293
jquery和js用过不少次了，但是没有系统的整合过，算是笔记吧，随便写写。 （一）html代码： <div></div> <div class="two"></div> <div id="three">&a
javascript实现小九九乘法口诀
weixin_34162695的博客
10-09 171
1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>JavaScript九九乘法表</title> 5 6 <sty...
js--实现九九乘法表
qq_53441451的博客
12-23 244
九九乘法表运行效果： // 九九乘法表 j i // 1*1=1 1 1 // 1*2=2 2*2=4 1 2 2 // 1*3=
九九乘法表面向对象方法书写
Macheal_ycq的博客
11-12 336
<script> function CCC(n){ this.n=n } CCC.prototype.say=function(){ for(var i=1;i<=this.n;i++){ for(var j=1; j<=i;j++){ ...
易语言小九九
10-23
易语言小九九源码写的小程序，可以参考！发一次怎么这样难呢！呵
小九九测试题
12-21
1、应用于小学二年级上学期，小九九口诀练习。 2、帮助孩子快速掌握小九九口诀。 3、此程序有两大功能，直接点击“开始测试”为无限练习至点“停止测试”为止，如有错题中途会给于提示，并在点“停止测试”后出现...
小九九乘法表
10-24
小九九乘法表,一个很简单的c语言程序，老鸟直接飞走，菜鸟有兴趣的可以看看！
小九九C语言
04-16
打印出各种类型的小99在电脑屏幕上，有倒着打印的，有顺着打印的，从简单到复杂，适合初学C的人看
java 小九九乘法表
06-18
java 小九九乘法表 java 小九九乘法表 java 小九九乘法表
JS打印99乘法表
weixin_44984664的博客
02-27 1513
JS打印99乘法表 环境： Visual Studio Code ​Chrome 在学习了HTML和CSS之后终于步入了Javascript的学习辽，下面是完成的第一个JS的小练习题，打印99乘法表 效果如下： 下面就是基本的代码啦： <!DOCTYPE html> <html> <head> <title>99乘法表</title> ...
js九九乘法表
qq_41392076的博客
12-29 72
九九乘法表
【js初学】9*9乘法表,javascript
hhhhhhhhhy的博客
09-21 1444
for (var i = 1; i for (var j = 1; j       document.write(i+'*'+j+'='+i*j+'  ‘);                        document.write'); }document.write(''); }
【总结】UML图的小九九——包图
软件工程探索之旅
12-09 1119
在画图工具中有一个长的像文件夹的东西，它叫做包，由包含各种元素的包组合起来的图就叫做包图。为什么叫它小九九呢？因为包图并不是正式的UML图，但却可以由任何一种的UML图组成，通常是UML用例图或UML类图。既然有用例图和类图等图，为什么还要再来个小九九呢？这就要看包图的作用了——它不仅仅是长的像文件夹，在功能上起到了文件夹的功能。
JavaScript入门实例(1)
小九九(●'◡'●)
03-07 438
1.按键事件实现改变文字内容 <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> <script type="text/javascript"> function changetext(){ document.getElementById("text").innerHTML="Hello！JavaScript
JavaScript js写九九乘法表（两种方法）
热门推荐
qq_46058838的博客
10-25 4万+
方法一： 观察规律： 第一个数每行都是自增1。 我们发下第二个数都是从1开始，依次递增1，永远不大于前面的数。 前面数字每自增一次，后面数字自增一轮。 我们可以用双重for循环，外层初始值设为i，i从1开始，到9结束，自增1 内层从初始值设为j，j从1开始，小于等于外层的i，自增1 九九乘法表代码如下： for (var i = 1;i<=9;i++){ for (var j = 1;j<=i;j++){ document.write(i+
用java实现99乘法表
weixin_43612352的博客
05-23 8141
public class chengfa99 { public static void main(String[] args) { int s = 1; for(int i=1;i<=9;i++) { for(int j=1;j<=i;j++) { s = i*j; //用的是System.out.prin...
原生js的9*9乘法表
li_guangxi的博客
07-24 742
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ margin: 0;
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 304
在vue.config.js中配置关闭Uncaught runtime errors显示。
shell编写小九九乘法表
03-02
您好，我可以为您提供一个编写小九九乘法表的shell脚本，如下所示： ``` #!/bin/bash for i in `seq 1 9` do for j in `seq 1 $i` do echo -n "$j*$i=$(($j*$i)) " done echo "" done ``` 这个脚本会输出...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值