javascript的一些知识(七)

阅读：评论：0

javascript的一些知识(七)

new运算符

1.执行函数 2.自动创建一个空对象 3.把创建的对象指向另一个对象
4.把空对象和函数的this链接起来(this指向实例化对象) 5.隐式返还this
6.简化工厂模式;----->构造函数

function Tab(){this.name = "张三";/* this.hobby = function(){console.log("篮球");} */
}Tab.prototype.hobby = function(){console.log(&#",this.name);//,张三}//会开辟一个公共空间（原型：Tab.prototype）
let tab1 = new Tab()
console.log(tab1.name);
tab1.hobby();/* 
1.首字符大写，属性放在构造函数里，方法放在原型里。原型本质也是一个对象
2.构造函数一部分由构造函数构成本身构成，一部分由原型构成（prototype）。且共用一个this。
3.实例化之后形成一个对象，对象也由两部分构成，一部分由对象本身构成，另一部分由由原型
构成(__proto__).
4.上面两个原型本质上是一个东西只是表现形式不同。
5.每个原型上都有一个预定义属性：constructor 指向构造函数
故：  Tab.prototype = {constructor:Tab, //要这样写的化必须加这个，否则会覆盖原本的constructor属性hobby(){console.log(&#")},
}*///仿写new效果
function mynew(constructor,...arg){let obj={},constructor.call(obj,...arg);obj.__proto__ = constructor.prototype;return obj;
}

拖拽

<html><head><style>.mydiv1{width:100px;height:100px;background:red;position:absolute;}</style></head><body><div class="mydiv1"></div></body><script>let mydiv1 = document.querySelector(".mydiv1");usedown = e=>{let ev = e||window.event;let x =ev.clientX - mydiv1.offsetLeft;let y =ev.clientY - mydiv1.usemove = e=>{let ev = e||window.event;let xx = ev.clientX;let yy = ev.clientY;mydiv1.style.left = xx-x+"px";p = yy-y+"px";}useup = function(){usemove = "";}}</script></html>

拖拽面向对象封装

<html><head><style>.mydiv1{width:100px;height:100px;background:red;position:absolute;}.mydiv2{width:100px;height:100px;background:blue;position:absolute;left:300;}</style></head><body><div class="mydiv1"></div><div class="mydiv2"></div></body><script>  function Drag(ele){this.ele = ele; //节点this.downFn();}Drag.prototype.downFn = function(){usedown = e=>{let ev = e||window.event;let x =ev.clientX - this.ele.offsetLeft;let y =ev.clientY - this.ele.veFn(x,y);this.upFn();}}veFn = function(x,y){usemove = e=>{let ev = e||window.event;let xx = ev.clientX;let yy = ev.clientY;this.ele.style.left = xx-x+"px";this.p = yy-y+"px";}}Drag.prototype.upFn = function(){useup = ()=>{usemove = "";}}let mydiv1 = document.querySelector(".mydiv1");let mydiv1 = document.querySelector(".mydiv2");let drag1 = new Drag(mydiv1);let drag1 = new Drag(mydiv2);</script></html>

es5普通继承

function Dad(height){this.name = "张三"；this.age = 20;this.height =  = "$11000000";
}function Son(height){Dad.call(this,height);//或者 Dad.apply(this,[height]);//或者 Dad.bind(this)(height);
}let newSon = new Son("178cm");
console.log(newSon);

es5原型组合继承

function Dad(height){this.name = "张三"；this.age = 20;this.height =  = "$11000000";
}
Dad.prototype.hobby = function(){console.log("喜欢高尔夫");
}function Son(height){Dad.call(this,height);//或者 Dad.apply(this,[height]);//或者 Dad.bind(this)(height);
}let Link = function(){}; //通过Link空函数实例化切断了子类原型与父类原型在内存之间的引用关系
Link.prototype = Dad.prototype;
Son.prototype = new Link();
//这里预定义属性constructor覆盖了;
structor = Son;
Son.prototype.hobby = function(){console.log("篮球")
}let newSon = new Son("178cm");
console.log(newSon);

深拷贝

function deepCopy(obj){let newObj = Array.isArray(obj)?[]:{};for(let i in obj){if(obj.hasOwnProperty(i)){ //判断不是原型而是本身属性和方法进行深拷贝if(typeof obj[i]==="object"){if(obj[i] ===null){newObj[i] = null;}else{newObj[i] = deepCopy(obj[i]);}}else{newObj[i] = obj[i];}}}return newObj;
}

深拷贝继承

  function LimitDrag(ele){Drag.call(this.ele);}// let Link = function(){};// Link.prototype = Drag.prototype;// LimitDrag.prototype = new Link();LimitDrag.prototype = deepCopy(Drag.prototype);structor = LimitDrag;LimitDrag.prototype.setStyle = function(leftNum,topNum){leftNum = leftNum<0?0:leftNum;topNum = topNum<0?0:topNum;this.ele.style.left = leftNum + "px";this.p = topNum +"px";}let mydiv2 = document.querySelector(".mydiv2");let drag2 = new LimitDrag(mydiv2);function deepCopy(obj){let newObj = Array.isArray(obj)?[]:{};for(let i in obj){if(obj.hasOwnProperty(i)){ //判断不是原型而是本身属性和方法进行深拷贝if(typeof obj[i]==="object"){if(obj[i] ===null){newObj[i] = null;}else{newObj[i] = deepCopy(obj[i]);}}else{newObj[i] = obj[i];}}}return newObj;}

原型链

构造函数在查找时先在自身查找返回，再在原型中查找
原型本质也是一个对象，也由自身和原型构成，像链式一样；

es6类

function Tab(){this.name = "张三";
}
Tab.prototype.hobby = function(){console.log("篮球");
}//类 它的类型是function
class Tab{// static height = "178cm" //静态属性只有类Tab有关constructor(){ this.name = "张三";}hobby(){console.log("篮球");}
}
//或者这样写
Tab.height = "178cm"; //
console.log(Tab.height); //静态属性这样取//动态属性与实例化对象有关
let tab1 = new Tab();

es6继承类

class Tab{static height = "178cm" //静态属性只有类Tab有关constructor(age){ this.name = "张三";this.age = age;}hobby(){console.log("篮球");}
}class LimitTab extends Tab{constructor(age){super(age);  //必须调用}hobby(){super.hobby();会将父类的逻辑拿过来console.log("足球")}
}//静态属性打印
console.log(LimitTab.height); //178cmlet tab2 = new LimitTab(20); //参数传给age
//动态属性打印
console.log(tab2.age); //20tab2.hobby(); //篮球 足球

限定范围拖拽（通过继承实现）

<html><head><style>.mydiv1{width:100px;height:100px;background:red;position:absolute;}.mydiv2{width:100px;height:100px;background:blue;position:absolute;left:300;}</style></head><body><div class="mydiv1"></div><div class="mydiv2"></div></body><script>  function Drag(ele){this.ele = ele; //节点this.downFn();}Drag.prototype.downFn = function(){usedown = e=>{let ev = e||window.event;let x =ev.clientX - this.ele.offsetLeft;let y =ev.clientY - this.ele.veFn(x,y);this.upFn();}}veFn = function(x,y){usemove = e=>{let ev = e||window.event;let xx = ev.clientX;let yy = ev.clientY;this.ele.style.left = xx-x+"px";this.p = yy-y+"px";}}Drag.prototype.upFn = function(){useup = ()=>{usemove = "";}}let mydiv1 = document.querySelector(".mydiv1");//let mydiv2 = document.querySelector(".mydiv2");let drag1 = new Drag(mydiv1);//let drag2 = new Drag(mydiv2);//继承：es5function LimitDrag(ele){Drag.call(this.ele);}let Link = function(){};Link.prototype = Drag.prototype;LimitDrag.prototype = new Link();structor = LimitDrag;LimitDrag.prototype.setStyle = function(leftNum,topNum){leftNum = leftNum<0?0:leftNum;topNum = topNum<0?0:topNum;this.ele.style.left = leftNum + "px";this.p = topNum +"px";}let mydiv2 = document.querySelector(".mydiv2");let drag2 = new LimitDrag(mydiv2);//es6继承class Drag{constructor(ele){this.ele = ele;this.downFn();}downFn(){usedown = e=>{let ev = e||window.event;let x =ev.clientX - this.ele.offsetLeft;let y =ev.clientY - this.ele.veFn(x,y);this.upFn();}}moveFn(x,y){usemove = e=>{let ev = e||window.event;let xx = ev.clientX;let yy = ev.clientY;this.ele.style.left = xx-x+"px";this.p = yy-y+"px";}}setStyle(leftNum,topNum){this.ele.style.left = leftNum + "px";this.p = topNum +"px";}upFn(){useup = ()=>{usemove = "";}}}let mydiv1 = document.querySelector(".mydiv1");let drag1 = new Drag(mydiv1);class LimitDrag extends Drag{constructor(ele){super(ele);}setStyle(leftNum,topNum){leftNum = leftNum<0?0:leftNum;topNum = topNum<0?0:topNum;super.setStyle(leftNum,topNum);}}let mydiv2 = document.querySelector(".mydiv2");let drag2 = new LimitDrag(mydiv2);</script></html>

包装对象

//基本类型，string number boolean 系统会给基本类型包装一个对象，即实例化一个基本类型对象

几个方法

hasOwnProperty() 判断是不是对象自身的属性，返回布尔值
constructor 判断实例化对象的指向，返回布尔值
精确判断类型 String.call(arr);

本文发布于:2024-02-03 06:07:20，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170691164049135.html

上一篇：机器学习入门知识

下一篇：Free Code Camp 知识点整理：Basic JavaScript

标签：知识 javascript

留言与评论（共有 0 条评论）