参考

操作原型

- 给原型添加属性
- 方法1: Fn.prototype.sum=function{}
- 方法2: Fn.prototype={} //constructor指向了Object的原型 - 修改原型既有的属性:
f1.__proto__.sum//ie禁止
Fn.prototype.sum

// 批量设置共有属性和方法

function Fn() {
this.x = 100;
} // 1,逐一添加法
// Fn.prototype.getX = function () {
//
// };
// Fn.prototype.getY = function () {
//
// };
// Fn.prototype.getZ = function () {
//
// }; // var pro = Fn.prototype;
// pro.getX = function () {
//
// };
// pro.getY = function () {
//
// };
// pro.getZ = function () {
//
// }; var f1 = new Fn(); // 2.重构原型方法
Fn.prototype = {
constructor: Fn, // 如果不指定.就会变成object,而非本函数
a: function () { },
b: function () { }
};
console.log(Fn.prototype.constructor === Fn);
console.log(f.constructor); // function Fn() {
// this.x = 100;
// }
//
// Fn.prototype = {
// a: function () {
//
// }
// };
//
// var f = new Fn();
// console.log(f.constructor);
function Fn() {
this.x = 100;
this.sum = function () {
}
} Fn.prototype.getX = function () {
console.log(this.x);
}; p2 = new Fn;//如果无参数可不加() // console.log(Fn);
// console.log(Fn.prototype);
// console.log(Fn.prototype.constructor);
// console.log(Fn.prototype.constructor === Fn);
// x 是f1的一个属性
console.log(f1.hasOwnProperty("x")); /*
* 3.原型链模式
* 3.1 先在私有作用域查找
* console.log(f1.hasOwnProperty("x"));
* 3.2 原型上定义的属性和方法都是共有方法
* */ f1.getX === f2.getX;
f1.__proto__.getX === f2.getX;
f1.getX === f2.__proto__.getX;
f1.getX === Fn.prototype.getX; console.log(f1.sum === Fn.prototype.sum); // f1.hasOwnProperty -->f1.__proto__.__proto__.hasOwnProperty(); f1.sum = function () {
//修改私有的sum
}; f1.__proto__.sum = function () {
//修改所属类原型上的sum ie浏览器不允许这样做
}; Fn.prototype.sum = function () {
// 修改公有的sum
};

给内置类增加数组去重方法

<script>
//2,给内置类增加数组去重方法
// Array.prototype.unique = function () {
//
// }; // 这种方法被浏览器屏蔽掉了
Array.prototype = {
constructor: Array,
unique: function () { }
};
console.log(Array.prototype); Array.prototype.sort=function () {
console.log(this);
};
var ary = [1,2,3,4,5];
ary.sort();
console.log(ary);
</script>

给原型添加数组去重方法

<script>
function Fn() {
this.x = 100;
this.y = 200;
this.getY = function () {
console.log(this.y)
}
} Fn.prototype = {
constructor: Fn,
y: 300,
getX: function () {
console.log(this.x)
},
getY: function () {
console.log(this.y)
}
};
var f = new Fn();
f.getX(); //100 调用私有作用域的
f.__proto__.getX(); //undefinded
f.__proto__.getY(); //300 调用原型上的, f.__proto__.y 1.看前面的. 2,替换 3,按照原型链模式去查找 /**
* 1,this是谁
* this.xxx= xxx, this是实例本身.
* getX=function(){} this看前面的点 1.看前面的. 2,替换 3,按照原型链模式去查找
*
*
*/
// Fn.prototype.getZ(); // 2,数组的链式写法, return this;
// 区别this
Array.prototype.myUnique = function () {
obj = {};
for (var i = 0; i < this.length; i++) {
var cur = this[i];
if (obj[cur] == this[i]) {
this[i] = this[this.length - 1];
this.length--;
i--;
continue;
}
obj[cur] = cur;
}
obj = null;
return this; // 用于链式书写, 因为前者的结果也是一个数组.
};
var arr = [1, 2, 2, 3, 3, 4, 4, 4, 4];
arr.myUnique().pop(); // this -> arr
// Array.prototype.myUnique(); // this -> Array.prototype.
console.log(arr);
</script>

[js]js设计模式-修改原型的更多相关文章

  1. js原生设计模式——7原型模式之真正的原型模式——对象复制封装

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. js原生设计模式——2面向对象编程之继承—原型继承(类式继承的封装)

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  5. [js]js设计模式小结

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  6. js中__proto__(内部原型)和prototype(构造器原型)的关系

    一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) Number.__proto__ === Function.prot ...

  7. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

  8. js中的prototype原型解析

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  9. js经典试题之原型与继承

    js经典试题之原型与继承 1:以下代码中hasOwnProperty的作用是? var obj={} …….. obj.hasOwnProperty("val") 答案:判断obj ...

随机推荐

  1. SQL Server 2016新特性:列存储索引新特性

    SQL Server 2016新特性:列存储索引新特性 行存储表可以有一个可更新的列存储索引,之前非聚集的列存储索引是只读的. 非聚集的列存储索引支持筛选条件. 在内存优化表中可以有一个列存储索引,可 ...

  2. WEB API Filter的使用以及执行顺序

    在WEB Api中,引入了面向切面编程(AOP)的思想,在某些特定的位置可以插入特定的Filter进行过程拦截处理.引入了这一机制可以更好地践行DRY(Don’t Repeat Yourself)思想 ...

  3. docker被屏蔽后下载方法

    docker镜像默认的官网上传平台:https://hub.docker.com/,k8s运行时需要从google下载镜像(k8s.gcr.io),但该网被屏蔽了,怎样下载到所需镜像呢? 1. 可在知 ...

  4. linux和windows强制用户第一次登陆修改密码

    linux: passwd -e root windows: 计算机右键->管理->本地用户和组->用户->administrator->下一次登陆修改密码 如果密码复杂 ...

  5. EasyPopup

    EasyPopup PopupWindow 对 PopupWindow 的封装,使得在项目中使用起来更加简单.方便.快捷 项目特性 链式调用:除了在传统的 PopupWindow 使用方法之外还加入了 ...

  6. 【GIS】无人机相关技术(转)

    ---------------------------------------------------------------------------------------------------G ...

  7. Android基础开发归档

    一.Android 基本组件汇总 1. Android中PackageManager使用示例 :  http://blog.csdn.net/qinjuning/article/details/686 ...

  8. Ai challenger 2017 image caption小结

    参加了今年的ai challenger 的image caption比赛,最终很幸运的获得了第二名.这里小结一下. Pytorch 越来越火了.. 前五名有三个pytorch, 两个tensorflo ...

  9. vscode c++ 编译生成后,调试时无法命中断点

    //test.cpp #include <stdio.h> ; void print_line(char *str) { if (str != NULL) printf("%s\ ...

  10. iOS - 跳转到系统设置

    一.跳转到自己应用设置(iOS8以上系统推荐使用) //跳转到自己应用干的设置配置页(如 定位.相机.相册 这些隐私配置) [[UIApplication sharedApplication] ope ...